javascript new实现过程

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

[转载]原文链接:https://segmentfault.com/a/1190000020363020

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74901.html

文章标题:javascript new实现过程

相关文章
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 <!DOCTYPE html> <html lang="en" style="width: 100%; height:100%;"&gt...
2017-02-17
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: <form id="form" method="post" action="http:&#x2...
2017-03-06
回到顶部