Javascript 面向对象编程中的‘new’

0 一般函数调用

function personFn(name, age) {    var personObj = {};

    personObj.name = name;
    personObj.age = age;    
    return personObj;
}var alex = personFn('Alex', 30);console.log(alex); // -> { name: 'Alex', age: 30 }

 

 

1 使用new 创建对象

function PersonConstructor(name, age) {    this.name = name;    this.age = age;
}var alex = new PersonConstructor('Alex', 30);console.log(alex); // -> PersonConstructor { name: 'Alex', age: 30 }

使用new触发的函数一般称为“构造函数”，大写字母开头，生成的对象包含“构造函数”名+返回的对象

其实使用new触发函数，Javascript engine会特殊处理，下面注释的伪码可以看成Javscript engine加入的特殊处理

function PersonConstructor(name, age) {    // this = {};
    // this.__proto__ = PersonConstructor.prototype;

    // Set up logic such that: if
    // there is a return statement
    // in the function body that
    // returns anything EXCEPT an
    // object, array, or function:
    //     return 'this' (the newly
    //     constructed object)
    //     instead of that item at
    //     the return statement;

    this.name = name;    this.age = age;    // return this;}

整段代码可以分解为下面几个部分：

1 创建一个空对象，将它绑定给this

2 将对象的_proto_属性设置为构造函数的原型prototype

3 返回逻辑：如果代码没有返回，或者返回的不是object, array, 或者 function中的一种，那么将返回this

4 在代码末尾添加return， 如果代码中没有return

 

例子

function Demo() {    console.log(this);    this.value = 5;    return 10;
}/*1*/ var demo = new Demo(); // -> Demo {}/*2*/ console.log(demo.__proto__ === Demo.prototype); // -> true/*3*/ console.log(demo); // -> Demo { value: 5 }function SecondDemo() {    this.val = '2nd demo';
}/*4*/ console.log(new SecondDemo()); // -> SecondDemo { val: '2nd demo' }

 

 

2 使用new 创建非构造函数

使用new 创建开头的普通函数，会发生什么？

function personFn(name, age) {    var personObj = {};

    personObj.name = name;
    personObj.age = age;    
    return personObj;
}var alex = new personFn('Alex', 30);console.log(alex); // -> { name: 'Alex', age: 30 }

结果和普通函数调用是一样的，我们看看Javascript engine 加入代码后的样子

function personFn(name, age) {    // this = {};
    // this.constructor = PersonConstructor;
    // this.__proto__ = PersonConstructor.prototype;

    // Set up logic such that: if
    // there is a return statement
    // in the function body that
    // returns anything EXCEPT an
    // object, array, or function:
    //     return this (the newly
    //     constructed object)
    //     instead of that item at
    //     the return statement;

    var personObj = {};

    personObj.name = name;
    personObj.age = age;    
    return personObj;    
    // return this;}

 

注释掉的代码主要做了下面四件事：

1 生成空对象，this绑定到这个空对象上

2 设置对象的构造函数和_proto_属性

3 设置返回逻辑

4 如果没有返回的话，添加return在代码的最后

 

其实这些操作并没有影响之前的代码，因为之前的代码并没有用到this, 而且也有返回对象

小结：使用new 对象时，构造函数里必须使用this才有价值。系统学习web前端知识到知海匠库http://www.zhihaijiangku.com。课程系统，项目教学，就业指导，一站式学会