美文网首页
new的模拟实现

new的模拟实现

作者: 怪物猎人 | 来源:发表于2018-03-17 14:36 被阅读0次

原文出处

JavaScript深入之new的模拟实现

new


我们在模拟 new 之前,先看看 new 实现了哪些功能。
举个例子:

        // Otaku 御宅族,简称宅
        function Otaku(name, age) {
            this.name = name;
            this.age = age;

            this.habit = 'Games';
        }

        // 因为缺乏锻炼的缘故,身体强度让人担忧
        Otaku.prototype.strength = 60;

        Otaku.prototype.sayYourName = function () {
            console.log('I am ' + this.name);
        }

        var person = new Otaku('Kevin', '18');

        console.log(person.name) // Kevin
        console.log(person.habit) // Games
        console.log(person.strength) // 60

        person.sayYourName(); // I am Kevin

从这个例子中,我们可以看到,实例 person 可以:

  1. 访问到 Otaku 构造函数里的属性
  2. 访问到 Otaku.prototype 中的属性

初步实现


分析:

  1. new返回一个新对象,假设这个对象叫obj
  2. obj可以调用Otaku构造函数进行初始化
  3. obj的 _proto_ 属性会指向构造函数的 prototype

所以我们可以使用借用借用构造函数模式来创建该对象,现在我们可以尝试着写第一版了:

        function objectFactory() {
            var obj = new Object();
            var constructor = Array.prototype.shift.call(arguments);
            Object.setPrototypeOf(obj, constructor.prototype); //模拟实例对象的__proto__指向构造函数的prototype
            constructor.apply(obj, arguments);
            return obj;
        }

复制以下的代码,到浏览器中,我们可以做一下测试:

        function Otaku(name, age) {
            this.name = name;
            this.age = age;

            this.habit = 'Games';
        }

        Otaku.prototype.strength = 60;

        Otaku.prototype.sayYourName = function () {
            console.log('I am ' + this.name);
        }

        function objectFactory() {
            var obj = new Object();
            var constructor = Array.prototype.shift.call(arguments);
            Object.setPrototypeOf(obj, constructor.prototype); //模拟实例对象的__proto__指向构造函数的prototype
            constructor.apply(obj, arguments);
            return obj;
        }

        var person = objectFactory(Otaku, 'Kevin', '18')

        console.log(person.name) // Kevin
        console.log(person.habit) // Games
        console.log(person.strength) // 60

        person.sayYourName(); // I am Kevin

返回值效果实现


接下来我们再来看一种情况,假如构造函数有返回值,举个例子:

    function Otaku(name, age) {
        this.strength = 60;
        this.age = age;

        return {
            name: name,
            habit: 'Games'
        }
    }

    var person = new Otaku('Kevin', '18');

    console.log(person.name) // Kevin
    console.log(person.habit) // Games
    console.log(person.strength) // undefined
    console.log(person.age) // undefined

在这个例子中,构造函数返回了一个对象,在实例 person 中只能访问返回的对象中的属性

而且还要注意一点,在这里我们是返回了一个对象,假如我们只是返回一个基本类型的值呢

再举个例子:

        function Otaku(name, age) {
            this.strength = 60;
            this.age = age;

            return 'handsome boy';
        }

        var person = new Otaku('Kevin', '18');

        console.log(person.name) // undefined
        console.log(person.habit) // undefined
        console.log(person.strength) // 60
        console.log(person.age) // 18

这次尽管有返回值,但是相当于没有返回值进行处理
所以我们还需要判断返回的值是不是一个对象,如果是一个对象,我们就返回这个对象,如果没有,我们该返回什么就返回什么

代码如下:

        // 第二版的代码
        function objectFactory() {

            var obj = new Object(),

                Constructor = [].shift.call(arguments);

            obj.__proto__ = Constructor.prototype;

            var ret = Constructor.apply(obj, arguments); // 需要对结果进行判断

            return typeof ret === 'object' ? ret || obj : obj;

        };

相关文章

  • new的模拟实现

    原文出处 JavaScript深入之new的模拟实现 new 我们在模拟 new 之前,先看看 new 实现了哪些...

  • 模拟实现new

    mdn关于new运算符的介绍: new 运算符创建一个自定义对象或具有构造函数的内置对象的实例。 是不是看着有点懵...

  • new的模拟实现

    实现目标: 创建新的对象 新对象属性有构造函数中this绑定的属性 新对象可以访问构造函数原型链上的属性和方法 如...

  • 模拟new的实现

    执行结果 百度百科:每个函数就是一个对象(Function),函数对象都有一个子对象 prototype 对象,类...

  • 模拟new的实现

    new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一 模拟new之前,看看new实现了哪些...

  • new的模拟实现

    new 实现的些功能。 实例 person 可以: 访问到 Otaku 构造函数里的属性 访问到 Otaku.pr...

  • js new的模拟实现

    new new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一 1、用new Object...

  • 2.new、apply、bind、call的模拟实现

    1.new的模拟实现 2.apply的模拟实现 原理很简单,将函数赋值成context的方法,调用函数,删除方法,...

  • JavaScript深入之new的模拟实现

    JavaScript深入系列第十二篇,通过new的模拟实现,带大家揭开使用new获得构造函数实例的真相 new 一...

  • 面试官问:能否模拟实现JS的call和apply方法

    之前写过两篇《面试官问:能否模拟实现JS的new操作符》和《面试官问:能否模拟实现JS的bind方法》 其中模拟b...

网友评论

      本文标题:new的模拟实现

      本文链接:https://www.haomeiwen.com/subject/quzdqftx.html