new 命令

基本用法

new 命令的作用,就是执行构造函数,返回一个实例对象。

1 var Vehicle = function (){
2 this.price = 1000;
3 };
4
5 var v = new Vehicle();
6 v.price // 1000

上面代码通过 new 命令,让构造函数Vehicle生成一个实例对象,保存在变量v中。这个新生成的实例对象,从构造函数Vehicle继承了price属性。在 new 命令执行时,构造函数内部的 this ,就代表了新生成的实例对象,this.price表示实例对象有一个price属性,它的值是1000。

使用new命令时,根据需要,构造函数也可以接受参数。

1 var Vehicle = function (p) {
2 this.price = p;
3 };
4 var v = new Vehicle(500);

new 命令本身就可以执行构造函数,所以后面的构造函数可以带括号,也可以不带括号。下面两行代码是等价的。

1 var v = new Vehicle();
2 var v = new Vehicle;

一个很自然的问题是,如果忘了使用 new 命令,直接调用构造函数会发生什么事?

这种情况下,构造函数就变成了普通函数,并不会生成实例对象。而且由于后面会说到的原因, this 这时代表全局对象,将造成一些意想不到的结果。

1 var Vehicle = function (){
2 this.price = 1000;
3 };
4 var v = Vehicle();
5 v.price
6 // Uncaught TypeError: Cannot read property 'price' of undefined
7 price
8 // 1000

上面代码中,调用Vehicle构造函数时,忘了加上 new 命令。结果,price属性变成了全局变量,而变量v变成了 undefined 。

因此,应该非常小心,避免出现不使用 new 命令、直接调用构造函数的情况。为了保证构造函数必须与 new 命令一起使用,一个解决办法是,在构造函数内部使用严格模式,即第一行加上 use strict 。

1 function Fubar(foo, bar){
2 'use strict';
3 this._foo = foo;
4 this._bar = bar;
5 }
6 Fubar()
7 // TypeError: Cannot set property '_foo' of undefined

上面代码的Fubar为构造函数, use strict 命令保证了该函数在严格模式下运行。由于在严格模式中,函数内部的this不能指向全局对象,默认等于 undefined ,导致不加new调用会报错(JavaScript不允许对 undefined 添加属性)。

另一个解决办法,是在构造函数内部判断是否使用 new 命令,如果发现没有使用,则直接返回一个实例对象。

1 function Fubar(foo, bar){
2 if (!(this instanceof Fubar)) {
3 return new Fubar(foo, bar);
4 }
5 this._foo = foo;
6 this._bar = bar;
7 }
8 Fubar(1, 2)._foo // 1
9 (new Fubar(1, 2))._foo // 1

上面代码中的构造函数,不管加不加new命令,都会得到同样的结果。

new命令的原理

使用new命令时,它后面的函数调用就不是正常的调用,而是依次执行下面的步骤。

  1. 创建一个空对象,作为将要返回的对象实例
  2. 将这个空对象的原型,指向构造函数的 prototype 属性
  3. 将这个空对象赋值给函数内部的 this 关键字
  4. 开始执行构造函数内部的代码

也就是说,构造函数内部, this 指的是一个新生成的空对象,所有针对 this 的操作,都会发生在这个空对象上。构造函数之所以叫“构造函数”,就是说这个函数的目的,就是操作一个空对象(即 this 对象),将其“构造”为需要的样子。

如果构造函数内部有return语句,而且return后面跟着一个对象, new 命令会返回 return 语句指定的对象;否则,就会不管 return 语句,返回 this 对象。

1 var Vehicle = function () {
2 this.price = 1000;
3 return 1000;
4 };
5 (new Vehicle()) === 1000
6 // false

上面代码中,构造函数Vehicle的 return 语句返回一个数值。这时, new 命令就会忽略这个 return 语句,返回“构造”后的 this 对象。

但是,如果return语句返回的是一个跟this无关的新对象, new 命令会返回这个新对象,而不是 this 对象。这一点需要特别引起注意。

1 var Vehicle = function (){
2 this.price = 1000;
3 return { price: 2000 };
4 };
5 (new Vehicle()).price
6 // 2000

上面代码中,构造函数 Vehicle 的 return 语句,返回的是一个新对象。 new 命令会返回这个对象,而不是 this 对象。

另一方面,如果对普通函数(内部没有 this 关键字的函数)使用 new 命令,则会返回一个空对象。

1 function getMessage() {
2 return 'this is a message';
3 }
4 var msg = new getMessage();
5 msg // {}
6 typeof msg // "Object"

上面代码中, getMessage 是一个普通函数,返回一个字符串。对它使用 new 命令,会得到一个空对象。这是因为 new 命令总是返回一个对象,要么是实例对象,要么是 return 语句指定的对象。本例中, return 语句返回的是字符串,所以 new 命令就忽略了该语句。

在javascript中,new关键字能让一个函数变得与众不同,把new搞清楚了,就明白构造函数中的this指向谁了。

举个例子

funtion Demo(){
console.log(this);
}
Demo();//window
new Demo();//demo

很显然使用new关键字之后,函数内部this的指向发生了变化,那么具体发生了什么变化呢,就得搞清楚new关键字究竟做了什么。

function New(func){
//声明一个中间对象,该对象为最终返回的实例
var res = {};
if(func.prototype != null){
//将实例的原型指向构造函数的原型
res.prototype = func.prototype;
}
//ret为构造函数执行的结果,这里通过```apply```,将构造函数内部的```this```指向修改为指向```res```,即实例对象
var ret = func.apply(res,Array.prototype.slice.call(arguments,1));
//当我们在构造函数上明确指定了返回对象时,那么```new```的执行结果就是该返回对象
if((typeof ret === 'object' || typeof ret === 'function')&&ret != null){
return ret;
}
return res;
}

所以在new一个实例的过程中,其实是执行了如下的步骤

  • 1、声明一个中间对象
  • 2、将该中间对象的原型指向构造函数的原型
  • 3、将构造函数中的this指向该中间对象
  • 4、返回该中间对象,即返回实例对象

new关键字对构造函数做了什么的更多相关文章

  1. .net学习之类与对象、new关键字、构造函数、常量和只读变量、枚举、结构、垃圾回收、静态成员、静态类等

    1.类与对象的关系类是对一类事务的统称,是抽象的,不能拿来直接使用,比如汽车,没有具体指哪一辆汽车对象是一个具体存在的,看的见,摸得着的,可以拿来直接使用,比如我家的那辆刚刚买的新汽车,就是具体的对象 ...

  2. 通过QT查找Word中的关键字,并做高亮或删除操作

    最近由于项目需要,要用QT操作Word文档.具体的工作需求:在指定的Word文档(*.doc文件/*.docx文件)中查找关键字,找到后做高亮操作或者直接删除操作,然后另存为到别的目录(表示这个文件被 ...

  3. JavaScript 中 new 关键字结合构造函数创建对象

    步骤: new会在内存中创建一个新的空对象 new 会让this指向这个新的对象 执行构造函数(给这个新对象添加属性和方法) new会返回这个新对象

  4. Python语言中的关键字(自己做的读书笔记)

    电脑配置:联想笔记本电脑 windows8系统 Python版本:2.7.8 本文章撰写时间:2015.1.1 作者:陈东陈 阅读说明: 1.本文都是先解释,后放图片: 2.文中斜体部分要么为需要输入 ...

  5. Java 面向对象之构造函数和 this 关键字

    构造函数 this 关键字 1. 构造函数 class Person { private String name; private int age; // 定义一个 Person 类的构造函数 Per ...

  6. C++中explicit关键字的使用

    看书看到了explicit关键字,就来做个笔记,讲得比较明白,比较浅. 在C++中,我们有时可以将构造函数用作自动类型转换函数.但这种自动特性并非总是合乎要求的,有时会导致意外的类型转换,因此,C++ ...

  7. JavaScript中的普通函数与构造函数比较

    问题 什么是构造函数?构造函数与普通函数区别是什么?用new关键字的时候到底做了什么?构造函数有返回值怎么办?构造函数能当普通函数调用吗? thisthis永远指向当前正在被执行的函数或方法的owne ...

  8. 关键字 this 的作用

    1.关键字 this ①是指当前对象自己 当一个类中要明确指出使用对象自己的变量或函数时,就应该加上this关键字,小栗子a如下: public class A { string Name = &qu ...

  9. JavaScript中的构造函数

    目录: constructor & prototype 为构造函数添加属性和方法的多种不同方法 组合使用this和prototype关键字创建构造函数(常用方法) 用对象直接量作为构造函数的参 ...

随机推荐

  1. 小学生都看得懂的C语言入门(6): 字符串

    1.字符用 char 表示 #include<stdio.h> int main() { char c; char d; c=; d='; if (c==d){ printf(" ...

  2. python面向对象三大特性之继承

    继承是创建新类的方法,以下是几个概念 父类,基类,超类: 被继承的类 子类,派生类:继承而产出的类 单继承:继承一个父类 多继承:继承多个父类 继承: 什么是什么的关系 父类中没有的属性,在字类中出现 ...

  3. 步步為營-95-MyMVC 1.0

    說明:通過自己編寫MyMVC以便於對MVC內容實現機制有更深刻的認識 1.1:創建MyMVC項目,刪除無關引用,只保留system 和 system.web.同時該項目中以後添加一些文件后也要刪除無關 ...

  4. HDU 1541 STAR(树状数组)

    Stars Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  5. 在Ubuntu内制作自己的VOC数据集

    一.VOC数据集的简介 PASCAL VOC为图像的识别和分类提供了一整套标准化的优秀数据集,基本上就是目标检测数据集的模板.现在有VOC2007,VOC2012.主要有20个类.而现在主要的模型评估 ...

  6. RabbitMq相关运维

    # 命令查询所有用户列表rabbitmqctl list_users # 使用命令对 xiandian-admin 用户进行授权set_permissions xiandian-admin '.*' ...

  7. Win10 配置Tomcat与Java环境变量

    一:下载JKD与Tomcat包 JDK        密码:d9ym Tomcat   密码:z9pa 二:安装JAVA-JDK与配置环境变量 ①:记住安装的地址 ②:配置JAVA-JDK的环境变量, ...

  8. WPF 下两种图片合成或加水印的方式(转载)

    来源:http://www.cnblogs.com/lxblog/ 最近项目中应用多次应用了图片合成,为了今后方便特此记下. 在WPF下有两种图片合成的方式,一种还是用原来C#提供的GDI+方式,命名 ...

  9. 'mysql' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

    1.C:\Users\Aiyufei>mysql -h 127.0.0.1 -u root'mysql' 不是内部或外部命令,也不是可运行的程序或批处理文件.解决方法: 配置环境变量即可,我的问 ...

  10. webstorm我用到的快捷键【不断更新】

    alt+insert:新建一个文件或其他 ctrl+shift+l:代码格式化 [可能会和qq的锁屏键冲突] ctrl+shift+r:批量查找替换 多点编辑:按住alt键选择多列,就可以编辑多行了 ...