阅读 106

实例对象New的全过程详细解析

1.原型链

剖析New过程的前提,就是了解清楚原型链的整个流程。

我们要先有个概念:

1.new出实例之后要将实例对象的__proto__指向构造函数的原型(prototype)上。

2.实例需要调用构造函数以实现得到,构造函数的内部属性和它在prototype上的方法,并改变this指向
复制代码

代码如下:

可分为5大步

// 首先创建一个最简单的构造函数
        function Person(name) {
            this.name = name;
        }
        Person.prototype.say = function () { console.log('Hello my friend!'); }

        // 明确我们要手写的函数
        // 通过此函数 创建出构造函数的实例
        // 此函数 需要传入构造函数本身(Person) 和 他本来所需的传递的参数
        function createExample() {
            // 1) 创建一空对象
            var obj = {};
            // 2) 取得传递过来的构造函数 得到Constructor
            var Constructor = [].shift.call(arguments);
            // 3) 调用构造函数此处分两步解析 
            // 1.将this指向空对象
            // 2.调用执行构造函数内部代码 得到返回值result
            var result = Constructor.apply(obj, arguments)
            // 4)设置原型链 即将obj.__proto__指向Person.prototype
            // 继承构造函数的方法
            obj.__proto__ = Constructor.prototype;
            
            console.log(obj);
            // 5) 判断返回的result是否为对象 如果是则返回自己 反之,返回空对象
            return typeof result == 'object' ? result : obj;
        }

        // 创建实例 传入构造函数本身(Person) 和 他本来所需的传递的参数
        var obj = createExample(Person, 'admin');

        // 检测obj是不是此构造函数的实例
        console.log(obj instanceof Person);//true

        // 调用方法,检测实例是否拥有方法
        obj.say()
复制代码

分享完毕,终于get到了new的原理,花了我两大两天啊!可恶!

文章分类
前端
文章标签