JS——new原理

通过new创建对象经历4个步骤

1、创建一个新对象;[var o = {};]

2、将构造函数的作用域赋给新对象(因此this指向了这个新对象);[Person.apply(o)] [Person原来的this指向的是window]

3、执行构造函数中的代码(为这个新对象添加属性);

4、返回新对象。

一、构造函数和原生new操作符

function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function () {
            alert(this.name);
        };
    }
    let person1 = new Person("yan",23,"stu");
    let person2 = new Person("sun",23,"stus");
    console.log(person1.__proto__ === person2.__proto__);//true
    console.log(person1.__proto__ === Person.prototype);//true
    console.log(Person.prototype.constructor === Person);//true
    //因此person1.__proto__ = person2.__proto__ = Person
    console.log(person1.name);//yan

二、构造函数和自己实现的New

function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayName = function () {
            alert(this.name);
        };
    }

let New = function (P) {
        let o = {};//创建一个空对象
        let arg = Array.prototype.slice.call(arguments,1);
        //将构造函数的作用域给新对象
        o.__proto__ = P.prototype;
        P.prototype.constructor = P;
        //执行构造函数中代码
        P.apply(o,arg);
        //返回新对象
        return o;
    };
    let p1 = New(Person,"Ysir",24,"stu");
    let p2 = New(Person,"Sun",23,"stus");
    console.log(p1.name);//Ysir
    console.log(p2.name);//Sun
    console.log(p1.__proto__ === p2.__proto__);//true
    console.log(p1.__proto__ === Person.prototype);//true

结合通过new创建对象经历4个步骤和上面的New函数理解一下。

猜你喜欢

转载自blog.csdn.net/ycq521131/article/details/81877662