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函数理解一下。

发布了11 篇原创文章 · 获赞 21 · 访问量 3万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览