阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

JS-new操作构造函数深度解析

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/1010/116462.html

现看一段很熟悉的代码:

说到继承就必先说构造函数 new Function()
那么 new 操作符究竟内部是如何实现的?
它是如何创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例?

查阅资料我们得知内部操作是:

创建一个空的简单JavaScript对象(即{});链接该对象(即设置该对象的构造函数)到另一个对象 ;将步骤1新创建的对象作为this的上下文 ;如果该函数没有返回对象,则返回this

现在我们自己实现一个 new Function() 同样功能的模拟构造函数 _new():

不是函数返回提示信息    if (Object.prototype.toString.call(arguments[ 0 ]) !== "[object Function]") {        throw "The first parameter must be a function.";    }        // 4.2、创建一个空的简单JavaScript对象(即{});        var obj = {};        // 4.3、链接该对象(即设置该对象的构造函数)到另一个对象(我认为说的是目标函数对象,绑定原型) ;    obj.__proto__ = arguments[ 0 ].prototype;        // 4.4、将步骤1新创建的对象作为this的上下文(大概是切换 this的意思,我们可以使用 apply 进行参数传递);    var res = arguments[ 0 ].apply(obj, Array.prototype.slice.call(arguments).slice(1));        // 4.5、如果该函数没有返回对象,则返回this(大概意思是说目标函数不存在返回值时,返回新对象,否则返回目标函数的返回值)
// 经过测试,使用 new 操作符时,目标函数有返回值就返回目标函数的返回值,我们也这样做
return res === undefined ? obj : res;}// 5、测试我们的函数var child = _new(Parent, "pch");console.log(child); // 输出: Parent { name: 'pch', say: [Function] }console.log(child.name); // 输出:pchconsole.log(child.say()); // 输出:pchconsole.log(child.age); // 输出:18// 测试错误传参try { _new(1, 2, 3);} catch (e) { console.log(e); // 输出:The first parameter must be a function.}// 测试带返回值的目标函数function ParentHasReturn() { return "pch";}console.log(_new(ParentHasReturn)); // 输出:pch// 6、总结:测试成功.

补充内容:

通用规则:

对象有__proto__属性,函数有prototype属性;对象由函数生成;生成对象时,对象的__proto__属性指向函数的prototype属性
更多内容请移驾:我的博客

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!