JavaScript之new运算符

wwq0327 发布于2019-08-23 18:22 / 2650人阅读

摘要：之运算符运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。使用指定的参数调用构造函数，并将绑定到新创建的对象。

JavaScript之new运算符

new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new关键字会进行如下的操作：

1. 创建一个空的简单JavaScript对象（即{}）；
2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
3. 将步骤1新创建的对象作为this的上下文 ；
4. 如果该函数没有返回对象，则返回this。

var cat = new Animal("cat");

new Animal("cat") = function () {
    var obj = {};        // 第1步
    obj.__proto__ = Animal.prototype;    // 第2步
    var result = Animal.call(obj,"cat");    // 第3步:obj.Animal("cat")
    return typeof result === "object"? result : obj;    // 第4步
}

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}

var car1 = new Car("Eagle", "Talon TSi", 1993);

console.log(car1.make);// expected output: "Eagle"

创建一个用户自定义的对象需要两步：

1. 通过编写函数来定义对象类型。
2. 通过new来创建对象实例。

创建一个对象类型，需要创建一个指定其名称和属性的函数；对象的属性可以指向其他对象，看下面的例子：
当代码new Foo(…)执行时，会发生以下事情：

1. 一个继承自Foo.prototype的新对象被创建。
2. 使用指定的参数调用构造函数Foo，并将 this绑定到新创建的对象。newFoo等同于new Foo()，也就是没有指定参数列表，Foo不带任何参数调用的情况。
3. 由构造函数返回的对象就是new表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

你始终可以对已定义的对象添加新的属性。例如，car1.color = "black"语句给car1添加了一个新的属性color，并给这个属性赋值 "black"。但是，这不会影响任何其他对象。要将新属性添加到相同类型的所有对象，你必须将该属性添加到Car对象类型的定义中。
你可以使用Function.prototype属性将共享属性添加到以前定义的对象类型。这定义了一个由该函数创建的所有对象共享的属性，而不仅仅是对象类型的其中一个实例。下面的代码将一个值为null的color属性添加到car类型的所有对象，然后仅在实例对象car1中用字符串 "black" 覆盖该值。详见 [prototype](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) 。

function Car() {}
car1 = new Car();
car2 = new Car();

console.log(car1.color);    // undefined
 
Car.prototype.color = "original color";
console.log(car1.color);    // original color
 
car1.color = "black";
console.log(car1.color);   // black

console.log(car1.__proto__.color) //original color
console.log(car2.__proto__.color) //original color
console.log(car1.color)  // black
console.log(car2.color) // original color

推荐阅读：
JavaScript之call()理解

我是Cloudy，年轻的前端攻城狮一枚，爱专研，爱技术，爱分享。 
个人笔记，整理不易，感谢阅读、点赞和收藏。
文章有任何问题欢迎大家指出，也欢迎大家一起交流前端各种问题！

云服务器 GPU云服务器 new运算符 javascript运算符 javascript位运算符 javascript运算

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105117.html

JavaScript阴沟里翻船之运算符优先级

摘要：操作符的两种形态其实在的操作符描述中，语法是你会发现被中括号所包围也就意味着可缺省，因此，如果对于不含参数的构造函数而言与二者并无区别，那我们接着思考一个问题，对于前面返回函数的而言，当的时候为什么执行的是而不是呢。　首先欢迎大家关注我的Github博客，也算是对我的一点鼓励，毕竟写东西没法变现，坚持下去也是靠的是自己的热情和大家的鼓励。各位读者的Star是激励我前进的动力，请不要吝...

selfimpr 2019-08-23 13:41 评论0 收藏0
01.javascript之数据类型

摘要：新增了第七种类型的值数值字符串布尔值对象数据类型判断有三种方法，可以判断一个值的类型运算符运算符方法运算符运算符可以返回一个值的数据类型。运算符运算符返回一个布尔值，表示对象是否为某个构造函数的实例。 1.数据类型 JavaScript一共有六种数据类型。（ES6新增了第七种Symbol类型的值）数值(Number) 字符串(String) 布尔值(boolean) undefin...

Aceyclee 2019-08-22 18:40 评论0 收藏0
【JavaScript】核心语法之数据类型

摘要：数据类型原始类型类型实为数字不区分整数和浮点类型整数类型包括负整数，和正整数浮点类型表示小数类型整数和浮点数小数或并不区分整数与浮点数变量的定义并初始化字面量或直接量定义数字值浮点类型是只该数值包含整数部分，小数部分，小数点和小数部分浮点类 JS(JavaScript) 数据类型； 1.原始类型； number类型；实为数字JS不区分整数和浮点类型；整数类型；包括负整数，0和正...

iflove 2019-08-23 11:32 评论0 收藏0
javascript基础之判断变量类型

摘要：判断变量类型数据类型种操作符可能返回的值如下注意的能力有限，其对于类型返回的都是使用场景区分对象和原始类型要区分一种对象类型和另一种对象类型可以使用运算符或对象属性运算符用法左边的运算数是一个右边运算数是对象类的名字或者构造函数返回或如果是判断变量类型 javaSctipt数据类型7种: Number, String, Boolean, Null, Undefined, Object...

jsdt 2019-08-21 17:49 评论0 收藏0
JavaScript 之核心语法 [ 数据类型 ]

摘要：数据类型数据类型表示数值的类型类型的分类原始类型类型数字类型类型分为整数和浮点数整数正整数负整数变量为数字类型整数显示浮点数小数变量为数字类型浮点数显示浮点数在小数点前面如果没有数字，会被默认为在小数点前的数字为比如会显示浮点数的数据类型数据类型 - 表示数值的类型类型的分类原始类型 number类型（数字类型） number类型分为整数和浮点数整数 - 正整数、0 、负...

luffyZh 2019-08-23 10:46 评论0 收藏0