JavaScript OOP（一）之构造函数与new命令

用户1149564

发布于 2018-01-11 17:18:16

4970

发布于 2018-01-11 17:18:16

文章被收录于专栏：Micro_awake webMicro_awake web

面向对象编程：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

运行结果：

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017-12-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度