微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

JavaScript 深入之new的模拟实现

2017-05-28 11:10 前端大全

(点击上方公众号,可快速关注)

作者:冴羽

github.com/mqyqingfeng/Blog/issues/13

如有好文章投稿,请点击 → 这里了解详情


new


一句话介绍 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 中的属性


接下来,我们可以尝试着模拟一下了。


因为 new 是关键字,所以无法像 bind 函数一样直接覆盖,所以我们写一个函数,命名为 objectFactory,来模拟 new 的效果。用的时候是这样的:


function Otaku () {

    ……

}

 

// 使用 new

var person = new Otaku(……);

// 使用 objectFactory

var person = objectFactory(Otaku, ……)


初步实现


分析:


因为 new 的结果是一个新对象,所以在模拟实现的时候,我们也要建立一个新对象,假设这个对象叫 obj,因为 obj 会具有 Otaku 构造函数里的属性,想想经典继承的例子,我们可以使用 Otaku.apply(obj, arguments)来给 obj 添加新的属性。


在 JavaScript 深入系列第一篇中,我们便讲了原型与原型链,我们知道实例的 __proto__ 属性会指向构造函数的 prototype,也正是因为建立起这样的关系,实例可以访问原型上的属性。


现在,我们可以尝试着写第一版了:


// 第一版代码

function objectFactory() {

 

    var obj = new Object(),

 

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

 

    obj.__proto__ = Constructor.prototype;

 

    Constructor.apply(obj, arguments);

 

    return obj;

 

};


在这一版中,我们:


  1. 用new Object() 的方式新建了一个对象 obj

  2. 取出第一个参数,就是我们要传入的构造函数。此外因为 shift 会修改原数组,所以 arguments 会被去除第一个参数

  3. 将 obj 的原型指向构造函数,这样 obj 就可以访问到构造函数原型中的属性

  4. 使用 apply,改变构造函数 this 的指向到新建的对象,这样 obj 就可以访问到构造函数中的属性

  5. 返回 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(),

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

    obj.__proto__ = Constructor.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;

 

};


深入系列


JavaScript深入系列目录地址:https://github.com/mqyqingfeng/Blog。


JavaScript深入系列预计写十五篇左右,旨在帮大家捋顺JavaScript底层知识,重点讲解如原型、作用域、执行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、继承等难点概念。


如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎star,对作者也是一种鼓励。



本系列:


  1. JavaScirpt 深入之从原型到原型链

  2. JavaScript 深入之词法作用域和动态作用域

  3. JavaScript 深入之执行上下文栈

  4. JavaScript 深入之变量对象

  5. JavaScript 深入之作用域链

  6. JavaScript 深入之从 ECMAScript 规范解读 this

  7. JavaScript 深入之执行上下文

  8. JavaScript 深入之闭包

  9. JavaScript 深入之参数按值传递

  10. JavaScript 深入之call和apply的模拟实现



觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

 
前端大全 更多文章 CSS3进阶:酷炫的3D旋转透视 webpack 前端构建性能优化策略小结 HTTP 协议入门 前端跨域请求原理及实践 Javascript 深拷贝
猜您喜欢 React Native开源项目-云翻译客户端 简析 .NET Core 构成体系 【京技院现场】饿了么技术团队走进京东到家研发总部技术交流 程序员的撕逼属性和选择焦虑 扫地僧投资理财——正确的投资观念(全程干货)