一句new的背后到底隐藏着什么秘密?

一句new的背后到底隐藏着什么秘密?

首先我们来看看new一个对象，发生了些什么事？

function classA() {
    this.data = 'foo';
    console.log('我是立即执行的');
}
var test = new classA();
console.log(test.data);
// 我是立即执行的
// foo

new一个对象的过程分为四步

1、创建一个新对象：

var obj = {};

2、设置新对象的__proto__属性指向构造函数的prototype对象

obj.__proto__ = classA.prototype;

3、使用新对象调用函数，函数中的this被指向新实例对象

classA.call(obj); // 因为call改变this指向之后是立即执行的，所以上文中的console.log会打印

4、到这里 new classA()就初始化完毕，将初始化完毕的新对象地址保存到等号左边

var test = new classA();
//注意：若构造函数中返回this或返回值是基本类型（number、string、boolean、null、undefined）的值，则返回新实例对象；若返回值是引用类型的值，则实际返回值为这个引用类型。

手动实现一个new

function New(cla){
    return function() {
        var o = {'__proto__': cla.prototype} // 第一步第二步合并
        cla.apply(o, arguments);
        return o;
    }
}

使用一下

function Person(name,age){
    this.name = name;
    this.age = age;
}
var p1 = new Person('Jack', 22);
var p2 = New(Person)('Jack', 22);

上面是正常的情况下是这样的，但是如果我们的构造函数中有return呢？

我们来写个例子测试一下

function classA() {
    this.data = 'foo';
    console.log('我是立即执行的');
    return {data: 'hello world！'} 
}
var test = new classA();
console.log(test.data); // hello world！

会发现我们打印出来的是hello wrold! 也就是说我们在new一个对象的时候，如果构造函数中有return语句，可以重写调用构造函数时返回的值（可以简单的理解为第三步被篡改了）。

可能看到这里对proto和prototype有一些疑惑？

prototype

prototype是函数特有的属性（对象是没有的！），记住只有函数才有！这个属性指向它的原型对象

我们来看两个例子

function Person() {
}
var person1 = new Person();
var person2 = new Person();
person1.name = 'Jiang'
console.log(person1.name); // 'Jiang'
console.log(person2.name); // undefined

function Person() {
}
Person.prototype.name = 'Jiang'
var person1 = new Person();
var person2 = new Person();
console.log(person1.name); // Jiang
console.log(person2.name); // Jiang

原型对象的好处是可以让所有对象实例共享它所包含的属性和方法

那直接在Person中写this.name = ‘Jack’, 在new Person()之后不是也能可以达到效果吗？,但如果是像toString()方法，就需要写在原型上，方便原型链的查找

proto

刚刚说了，prototype属性是函数特有的，那么对象要怎么看到自己的原型?主流浏览器都提供了__proto__这个属性，指向该对象的原型

function Person() {
}
Person.prototype.name = 'Jiang';
person1.__proto__ === Person.prototype // true 为什么是true？ 想想new操作的第三步

所以总结可得proto就是用来将对象与该对象的原型相连