JavaScript 中的“new"关键字是什么? [英] What is the 'new' keyword in JavaScript?

查看:30
本文介绍了JavaScript 中的“new"关键字是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

JavaScript 中的 new 关键字在第一次遇到时可能会很混乱,因为人们往往认为 JavaScript 不是面向对象的编程语言.

The new keyword in JavaScript can be quite confusing when it is first encountered, as people tend to think that JavaScript is not an object-oriented programming language.

  • 这是什么?
  • 它解决了什么问题?
  • 什么时候合适,什么时候不合适?

推荐答案

它做了 5 件事:

  1. 它创建了一个新对象.这个对象的类型只是object.
  2. 它将这个新对象的内部、不可访问的[[prototype]](即__proto__)属性设置为构造函数的外部、可访问的prototype 对象(每个函数对象自动有一个 prototype 属性).
  3. 它使 this 变量指向新创建的对象.
  4. 每当提到this时,它都会执行构造函数,使用新创建的对象.
  5. 它返回新创建的对象,除非构造函数返回一个非null 对象引用.在这种情况下,将返回该对象引用.
  1. It creates a new object. The type of this object is simply object.
  2. It sets this new object's internal, inaccessible, [[prototype]] (i.e. __proto__) property to be the constructor function's external, accessible, prototype object (every function object automatically has a prototype property).
  3. It makes the this variable point to the newly created object.
  4. It executes the constructor function, using the newly created object whenever this is mentioned.
  5. It returns the newly created object, unless the constructor function returns a non-null object reference. In this case, that object reference is returned instead.

注意:构造函数指的是new关键字后的函数,如

Note: constructor function refers to the function after the new keyword, as in

new ConstructorFunction(arg1, arg2)

一旦完成,如果请求新对象的未定义属性,脚本将改为检查对象的 [[prototype]] 对象的属性.这就是您如何获得类似于 JavaScript 中传统类继承的东西.

Once this is done, if an undefined property of the new object is requested, the script will check the object's [[prototype]] object for the property instead. This is how you can get something similar to traditional class inheritance in JavaScript.

最困难的部分是第 2 点.每个对象(包括函数)都有一个称为 [[prototype]] 的内部属性.它可以在对象创建时设置,可以使用 newObject.create 或基于文字(函数默认为 Function.prototype、数字到 Number.prototype 等).它只能用 Object.getPrototypeOf(someObject) 读取.没有其他方法可以设置或读取此值.

The most difficult part about this is point number 2. Every object (including functions) has this internal property called [[prototype]]. It can only be set at object creation time, either with new, with Object.create, or based on the literal (functions default to Function.prototype, numbers to Number.prototype, etc.). It can only be read with Object.getPrototypeOf(someObject). There is no other way to set or read this value.

函数,除了隐藏的[[prototype]]属性,还有一个属性叫做prototype,就是这个,你可以访问,修改,为您创建的对象提供继承的属性和方法.

Functions, in addition to the hidden [[prototype]] property, also have a property called prototype, and it is this that you can access, and modify, to provide inherited properties and methods for the objects you make.

这是一个例子:

ObjMaker = function() {this.a = 'first';};
// ObjMaker is just a function, there's nothing special about it that makes 
// it a constructor.

ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible prototype property that 
// we can alter. I just added a property called 'b' to it. Like 
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with

obj1 = new ObjMaker();
// 3 things just happened.
// A new, empty object was created called obj1.  At first obj1 was the same
// as {}. The [[prototype]] property of obj1 was then set to the current
// object value of the ObjMaker.prototype (if ObjMaker.prototype is later
// assigned a new object value, obj1's [[prototype]] will not change, but you
// can alter the properties of ObjMaker.prototype to add to both the
// prototype and [[prototype]]). The ObjMaker function was executed, with
// obj1 in place of this... so obj1.a was set to 'first'.

obj1.a;
// returns 'first'
obj1.b;
// obj1 doesn't have a property called 'b', so JavaScript checks 
// its [[prototype]]. Its [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'

这就像类继承,因为现在,您使用 new ObjMaker() 创建的任何对象似乎也继承了 'b' 属性.

It's like class inheritance because now, any objects you make using new ObjMaker() will also appear to have inherited the 'b' property.

如果你想要类似子类的东西,那么你可以这样做:

If you want something like a subclass, then you do this:

SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);

SubObjMaker.prototype.c = 'third';  
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is ObjMaker.prototype. So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype

obj2.c;
// returns 'third', from SubObjMaker.prototype

obj2.b;
// returns 'second', from ObjMaker.prototype

obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype 
// was created with the ObjMaker function, which assigned a for us

<小时>

在最终找到此页面之前,我阅读了大量有关此主题的废话,这里用漂亮的图表很好地解释了这一点.


I read a ton of rubbish on this subject before finally finding this page, where this is explained very well with nice diagrams.

这篇关于JavaScript 中的“new"关键字是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆