专栏首页Micro_awake webJavaScript OOP(一)之构造函数与new命令

JavaScript OOP(一)之构造函数与new命令

 面向对象编程:Object Oriented Programming,简称OOP。

典型的oop语言,如hava、c++,存在着的概念,类就是对象的模板

可以类比人类;而实例化类后变为对象,对象可以类比男人;其实男人还可以作为一个类小明是男人这个类的实例化对象

而在JavaScript语言中,构造函数充当着对象的模板作用

JavaScript对象体系,是基于“构造函数”(constructor)“原型对象”(prototype)的,不是基于类

使用构造函数和new示例:

 1 var O1=function(){
 2     this.name='apple';
 3 };
 4 /**
 5  * 1.函数名一般大写进行区分;构造函数内部使用了this关键字
 6  * 2.生成对象,使用new
 7  */
 8 var o2=new O1();
 9 console.log(typeof o2,o2);
10 
11 function O2(){
12     this.name='microsoft';
13 }
14 var o3=new O2();
15 console.log(typeof o3,o2);
16 console.log('---');

运行结果:

构造函数也可以带参数:

 1 var Apple=function(){
 2     this.weight=100;
 3 };
 4 var a=new Apple();//相当于var a=new Apple;
 5 console.log(a.weight);
 6 var Apple1=function(weight){
 7     this.weight=weight;
 8 }
 9 var a1=new Apple1(10);
10 console.log(a1.weight);

如果构造函数未带参数,那么使用new命令时,可以省略()。

运行结果:

如果没有使用new命令调用构造函数:那么this指向全局对象或者说是顶层对象(即window)

1 function Blue(){
2     this.money=1000;
3 }
4 var b1=new Blue();
5 var b2=Blue();//window.money
6 console.log(b1,b2);
7 console.log(b1.money,window.money,money);

运行结果:(b2:undefined)

为了避免出现不加new调用构造函数的情况:1.使用严格模式;2.构造函数内部对this的指向进行判断

 1 //避免出现不加new情况,使用'use strict';
 2 //在严格模式下,函数内部this不允许指向全局对象window,默认等于undefined
 3 function Cat(){
 4     'use strict';
 5     this.color='white';
 6 }
 7 //var c1=Cat();//报错,不能将属性color添加给undefined
 8 
 9 function Dog(){
10     //如果this不指向当前对象Dog,那么使用new生成实例对象
11     if(!(this instanceof Dog)){
12         return new Dog();
13     }
14     this.name='xiaoming';
15 }
16 var d1=Dog();
17 console.log(d1);
18 var d2=new Dog();
19 console.log(d2);

运行结果:

构造函数中存在return语句ruturn对象,那么new 返回return的这个对象否则return无效,返回this

 1 console.log('---');
 2 function Ele(){
 3     this.name='nicai';
 4     return 100;
 5 }
 6 var e1=new Ele();
 7 console.log(e1);
 8 
 9 function Ele1(){
10     this.name='apple';
11     return {
12         name:'blue',
13         calss:'super calss'
14     };
15 }
16 var e2=new Ele1();
17 console.log(e2);
18 console.log(e2.name);//blue

运行结果:

普通函数使用new调用:生成空对象

//注意与普通函数进行区分;普通函数:内部没有this关键字、函数名一般以小写开头
function fire(){
    var s='this is a test function';
    return s;
}
var f1=new fire();
console.log(f1,typeof f1);

运行结果:

new.target属性:

1 //函数内部使用new.target属性。如果函数被new调用,则new.target等于当前函数;否则,new.target等于undefined
2 
3 function Gird(){
4     this.name='gird';
5     console.log(new.target===Gird);
6 }
7 var g1=new Gird();//true
8 var g2=Gird();//false

运行结果:

参考:阮一峰标准参考教程

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • es6(三):es6中函数的扩展(参数默认值、rest参数、箭头函数)

    1.函数可以设置参数默认值 1 function test1(x,y=1){ 2 console.log(x,y) 3 } 4 te...

    用户1149564
  • es6(五):class关键字(extends,super,static)

    ES5中,生成对象通过构造函数: 1 function A(name,age){ 2 this.name=name; 3 this...

    用户1149564
  • es6(二):解构赋值

    ES中允许按照一定格式从数组,对象值提取值,对变量进行赋值,这就是解构(Destructuring) 1 let [a,b,c]=[1,10,100] 2 ...

    用户1149564
  • 深入理解面向对象中的原始类型和引用类型

    我们先前学过的数据类型可以划分成两类:原始类型和引用类型。原始类型的数据都是一些比较简单数据,比如字符串,数字等。引用类型的数据稍微复杂一点,比如对象。

    小周sri的码农
  • JavaScript启示录

    最近阅读了《JavaScript启示录》,一本很薄但是内容却很充实的书籍。展现了准确的JavaScript世界观,涉及对象、属性、复杂值、原始值、作用域、继承...

    奋飛
  • 使用Java 10的var类型推断的几个注意点!

    不加选择地应用var可能会让代码不容易理解,因为模糊了类型这个概念,而人类是依据类型分类进行逻辑思考的,这样就使事情变得更糟,如果使用得当,var可以帮助改进良...

    本人秃顶程序员
  • 开发 | 「小游戏」开发难?不妨先从 2048 入手试试看

    最近流行微信「跳一跳」小游戏,我也心血来潮写了一个微信小程序版 2048,本篇文章主要分享实现 2048 的算法以及注意的点,一起来学习吧!

    知晓君
  • LINQ to XML 从逗号分隔值 (CSV) 文件生成 XML 文件

    参考:http://msdn.microsoft.com/zh-cn/library/bb387090.aspx

    跟着阿笨一起玩NET
  • JS示例22-通过className查找元素

    专注APP开发
  • JAVA使用SnakeYAML解析与序列化YAML

    本文,我们将学习如何使用SnakeYAML库将 YAML文档转换为Java对象,以及JAVA对象如何序列化为YAML文档。

    用户1177380

扫码关注云+社区

领取腾讯云代金券