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

 面向对象编程：Object Oriented Programming，简称OOP。

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

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

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

JavaScript对象体系，是基于“构造函数”（constructor）和“原型对象”（prototype）的，不是基于类

 

使用构造函数和new示例：

var O1=function(){
    this.name='apple';
};
/**
 * 1.函数名一般大写进行区分；构造函数内部使用了this关键字
 * 2.生成对象，使用new
 */
var o2=new O1();
console.log(typeof o2,o2);

function O2(){
    this.name='microsoft';
}
var o3=new O2();
console.log(typeof o3,o2);
console.log('---');

运行结果：

 

构造函数也可以带参数：

var Apple=function(){
    this.weight=100;
};
var a=new Apple();//相当于var a=new Apple;
console.log(a.weight);
var Apple1=function(weight){
    this.weight=weight;
}
var a1=new Apple1(10);
console.log(a1.weight);

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

运行结果：

 

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

function Blue(){
    this.money=1000;
}
var b1=new Blue();
var b2=Blue();//window.money
console.log(b1,b2);
console.log(b1.money,window.money,money);

运行结果：(b2:undefined)

 

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

//避免出现不加new情况，使用'use strict';
//在严格模式下，函数内部this不允许指向全局对象window，默认等于undefined
function Cat(){
    'use strict';
    this.color='white';
}
//var c1=Cat();//报错，不能将属性color添加给undefined

function Dog(){
    //如果this不指向当前对象Dog,那么使用new生成实例对象
    if(!(this instanceof Dog)){
        return new Dog();
    }
    this.name='xiaoming';
}
var d1=Dog();
console.log(d1);
var d2=new Dog();
console.log(d2);

运行结果：

 

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

console.log('---');
function Ele(){
    this.name='nicai';
    return 100;
}
var e1=new Ele();
console.log(e1);

function Ele1(){
    this.name='apple';
    return {
        name:'blue',
        calss:'super calss'
    };
}
var e2=new Ele1();
console.log(e2);
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属性：

//函数内部使用new.target属性。如果函数被new调用，则new.target等于当前函数；否则，new.target等于undefined

function Gird(){
    this.name='gird';
    console.log(new.target===Gird);
}
var g1=new Gird();//true
var g2=Gird();//false

运行结果：

 

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