javascript new实现过程

2019-09-11
// 自己实现一个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()方法的区别和用法详解看完,应该就完全理解上面这几行代码了。

原文链接:segmentfault.com

上一篇:JavaScript漫谈之深入理解变量
下一篇:snooplogg
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部