详解Javascript中new()到底做了些什么？

前言

和其他高级语言一样 javascript 中也有 new 运算符，我们知道 new 运算符是用来实例化一个类，从而在内存中分配一个实例对象。 但在 javascript 中，万物皆对象，为什么还要通过 new 来产生对象？ 本文将带你一起来探索 javascript 中 new 的奥秘...

要创建 Person 的新实例，必须使用 new 操作符。

以这种方式调用构造函数实际上会经历以下 4个步骤：

(1) 创建一个新对象；

(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象） ；

(3) 执行构造函数中的代码（为这个新对象添加属性） ；

(4) 返回新对象。

 new 操作符

在有上面的基础概念的介绍之后，在加上new操作符，我们就能完成传统面向对象的class + new的方式创建对象，在JavaScript中，我们将这类方式成为Pseudoclassical。

基于上面的例子，我们执行如下代码

var obj = new Base();

这样代码的结果是什么，我们在Javascript引擎中看到的对象模型是：

new操作符具体干了什么呢?其实很简单，就干了三件事情。

var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

第一行，我们创建了一个空对象obj

第二行，我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象

第三行，我们将Base函数对象的this指针替换成obj，然后再调用Base函数，于是我们就给obj对象赋值了一个id成员变量，这个成员变量的值是”base”，关于call函数的用法。

如果我们给Base.prototype的对象添加一些函数会有什么效果呢？

例如代码如下：

Base.prototype.toString = function() {
 return this.id;
}

那么当我们使用new创建一个新对象的时候，根据__proto__的特性，toString这个方法也可以做新对象的方法被访问到。于是我们看到了：

构造子中，我们来设置‘类'的成员变量（例如：例子中的id），构造子对象prototype中我们来设置‘类'的公共方法。于是通过函数对象和Javascript特有的__proto__与prototype成员及new操作符，模拟出类和类实例化的效果。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

您可能感兴趣的文章:

  • Javascript new关键字的玄机 以及其它
  • javascript中new关键字详解
  • javascript new一个对象的实质
  • JavaScript中的new的使用方法与注意事项
  • js中获取时间new Date()的全面介绍
  • javascript中使用new与不使用实例化对象的区别
  • 详解javascript new的运行机制
  • javascript new 需不需要继续使用
  • js中new一个对象的过程
  • javascript中的new使用
赞 (0)

相关推荐

  • javascript中new关键字详解

    javascript中new关键字详解

    和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中new关键字不是用来创建一个类的实例对象,而是用于继承. 接下来,本文将带你一起来探索JS中new的奥秘... function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = function(){ conso

  • javascript new一个对象的实质

    以前这些东西自己清楚,可是却解释不出来,也没有去深究这些东西.今天在看<悟透JavaScript>的时候,看到作者的描述,"茅厕"顿开. 现摘录如下,作者说的很是清楚: 用 var anObject = new aFunction() 形式创建对象的过程实际上可以分为三步: 第一步是建立一个新对象: 第二步将该对象内置的原型对象设置为构造函数prototype引用的那个原型对象: 第三步就是将该对象作为this参数调用构造函数,完成成员设置等初始化工作.

  • 详解javascript new的运行机制

    详解javascript new的运行机制

    和其他高级语言一样javascript 中也有new 运算符,我们知道new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 一.认识new运算符 function Animal(name){ this.name = name; } Animal.color = "black"; Animal.prototype.say = f

  • javascript中使用new与不使用实例化对象的区别

    我们先来看个实例 function Me(name,age,job){ this.name = name; this.age = age; this.job = job; } 请问这以下两种实例化对象方式有什么区别呢? var mefun1 = new Me('fei','20','it'); var mefun2 = Me('fei','20','it'); 简单的说 第一种是构造函数式,即通过new运算符调用构造函数Function来创建函数 第二种不是实例化,只是调用函数把返回值赋给变量.

  • js中new一个对象的过程

    使用new关键字调用函数(new ClassA(-))的具体步骤: 1. 创建空对象{} 2. 使用新对象,调用函数,函数中的this被指向新实例对象:          {}.构造函数();          3. 设置新对象的constructor属性为构造函数的名称,设置新对象的__proto__属性指向构造函数的prototype对象 4. 将初始化完毕的新对象地址,保存到等号左边的变量中 注意:若构造函数中没有返回值或返回值是基本类型(Number.String.Boolean)的值,

  • js中获取时间new Date()的全面介绍

    var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) 何问起 hovertree.com myDate.getTime(); /

  • javascript new 需不需要继续使用

    你也没有必要使用new Array(),使用[]: 不要使用 new Number, new String, or new Boolean. 等等 不要使用new Function 来创建函数 比如你要写 复制代码 代码如下: frames[0].onfocus = new Function("document.bgColor='antiquewhite'") 你应该这样写 复制代码 代码如下: frames[0].onfocus = function () {document.bgC

  • JavaScript中的new的使用方法与注意事项

    原文: JavaScript, We Hardly new Ya  --Douglas Crockford.    http://yuiblog.com/blog/2006/11/13/javascript-we-hardly-new-ya/ 引用 JavaScript是一门基于原型的语言,但它却拥有一个 new 操作符使得其看起来象一门经典的面对对象语言.那样也迷惑了程序员们,导致一些有问题的编程模式. 其实你永远不需要在JavaScript使用 new Object().用字面量的形式{}去

  • javascript中的new使用

    所以javascript中没有类的概念.理解这一点很重要,很多javascript教程为了让读者更容易理解,会套用他们常用的类模式中的概念,这 样反而让大家产生歧义. 先进段代码, 复制代码 代码如下: function employee(){ this.name=""; this.dept=""; } employee.prototype={ say:'hello' } var p = new employee(); 这段代码,我们会经常用到,其中new关键字最容

  • Javascript new关键字的玄机 以及其它

    Javascript new关键字的玄机 以及其它

    (接上)先看张对老手不新鲜但对菜鸟很有趣的图: What the heck is that? 简直是luan lun. new 抛开上面的图,先看看上篇文章留下的第二个问题,让我们在构造器的函数体内加点东西,看会发生什么. function A(){this.p = 1}var a = new A() 会得到如下结果: 为什么用new关键字构造出来的a,会获得p这个属性?new A()这行代码做了什么事情?根据上篇文章中Function的创建过程第4步,A这个对象会有一个Construct属性(

随机推荐