javascript-new实现过程

50次阅读

共计 674 个字符,预计需要花费 2 分钟才能阅读完成。

    // 自己实现一个 new
    function _new(_class, args) {
      // 1. 创建一个新的对象
      var obj = {}
      // 2. 把新对象的 __proto__ 指向构造函数的 prototype
      obj.__proto__ = _class.prototype
      // 3. 执行需要创建的类的构造函数,并临时改变构造函数的执行上下文(this)
      var _newClass = _class.call(obj, args)
      // 4. 如果构造函数有的返回值是一个 Object 实例,则返回这个实例,否则返回新的对象
      return _newClass instanceof Object ?  _newClass : obj
    }
    

验证一下

var Mobile = function(name) {this.name = name}
Mobile.prototype.show = function() {console.log(this.name)
}

var iPhone = new Mobile('iPhone')
iPhone.show() // 输出 iPhone
// 用自己的 new 创建
var Android = _new(Mobile,'Android')
Android.show() // 输出 Android

我个人觉得使用 es5 的类来解析会比较直观,所以使用的是 es5 代码.
如果直接使用 Class 的话,可能你需要理解一下,call 的时候,为什么新对象可以执行构造函数。那你可能还要看看 Class 这个语法糖

这里唯一有难的点就是 call 吧,推荐看一下这篇文章 js 中 call()和 apply()方法的区别和用法详解
看完,应该就完全理解上面这几行代码了。

正文完
 0