JavaScript中的new关键词

这两天学习JavaScript的数据类型以及字符转换过程中接触到了new这个关键词。比如new String()new Boolean()new Number()之类的。如果我们通过typeof来判断他们的类型的话,得到的结果都是object。那么在JavaScript中,new关键词有哪些知识点需要了解呢?

new和JavaScript关系

初学者会问,JavaScript和Java有什么关系,记得网友吐槽:

(^_^)这并不重要,不是我们今天要了解的事情。

JavaScript虽然听起来或看起来和Java很像,但实际上可以说是非常的不同,只不过当初为了更好的推广JavaScript,为了让它和Java有更多的相似性,吸引更多的Java程序员。因为在JavaScript中有了类似Java的语法var bar = new foo()。这样的方式在Java中可以根据某个类别class来创建对象,但在JavaScript中并没有真正的class这样的东东,这么做的目的只是为了让Java使用者在看到JavaScript的时候觉得有股亲切感,有股熟悉感。

那么在JavaScript中的new能做什么呢?

JavaScript中的new关键词做了什么

关于JavaScript中的new关键词的内容在网上非常多,很多人说new干了三件事情:

  • 创建一个空对象
  • 将空对象的__proto__指向构造函数的prototype
  • 使用空对象作为上下文调用构造函数

将上面的这个我们用JavaScript代码来表达。创建一个Person的函数:

function Person() {
    this.name = 'w3cplus'
}

根据上面描述的,new Person()做了:

  • 创建一个空对象:var obj = {}
  • 将空对象的__proto__指向构造函数的prototypeobj.__proto__ = Person().prototype
  • 使用空对象作为上下文调用构造函数: Person.call(obj)

来看一下事实是不是和上述描述的一样:

function Person() {
    this.name = 'w3cplus'
}

var obj = new Person();

console.dir(obj);

咱们先不管是不是真的做了三件事,先来看一下new这个过程都发生了些什么事情?

在JavaScript中new这个关键词其实也是众多运算符(Operators)中的其中一种。前面说过,当我们使用new关键词,实际上先创建了一个空的对象。接着Person这个函数会被执行(Invoke)。当函数在执行的时候,在执行上下文(Execution Context)中会有一个this被创建。而当我们使用new的时候,函数里的this会被指定成刚刚所建立的那个空对象。

所以当执行Person()这个函数时,执行到this.name时,因为this现在指向的是那个空对象,所以实际上是在帮这个空对象赋值(属性名称和属性值)。

在这样的过程中,只要这个函数没有指定return为其他对象时,它就会直接传回给我们这个新创建的对象。接着让我们来看这个函数的代码,从而更清楚的了解其执行的过程。

Person()函数有被执行

在上面的函数基础上增加一行新代码:

function Person() {
    this.name = 'w3cplus';
    this.age = 7;
    console.log('这个函数已经被执行了!')
}

var name = new Person();
console.log(name);

从Chrome浏览器console.log()打印出来的结果告诉我们,当使用new构建对象时,这个Person()函数其实已经被执行了。

通过new会帮我们创建一个空的对象

接着把Person()函数修改成这样:

function Person() {
    console.log(this);
}
var name = new Person()

上图已经告诉我们,new Person()创建了一个空对象Person {}。如果Person()函数中有return出其他的对象,则新对象会覆盖旧对象。

function Person() {
    this.name = 'w3cplus';
    this.age = 7;
    return {'Return': '原本this的内容就不会返回'}
}

var name = new Person();
console.log(name); //  {'Return': '原本this的内容就不会返回'}

除了这种情况,如果函数Person()有自己返回的值,但不是一个对象,比如:

function Person() {
    this.name = 'w3cplus';
    this.age = 7;
    return 1;
}

var name = new Person();
console.log(name); //  { name: 'w3cplus'}  

此时结果就不一样了,从上面的例子可以看出,如果构造函数返回的是原始值,那么这个返回值会被忽略,如果返回的是对象,就会覆盖构造的实例

构造函数的实际应用

上面的内容告诉我们,可以通过function的方法来创建一个新的对象,如果我们想要创建出同属性名称,但不同属性值的对象时,可以把对象的属性值当作函数的参数。这就是通过构造函数创建出许多不同的对象:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

var w3cplus = new Person('w3cplus', 7);
console.log(w3cplus);

var alibaba = new Person('Alibaba', 18);
console.log(alibaba);

这样就创建了两个对象:

说到这里,有几个概念需要了解,会对上面的内容有更好的了解。

Constructor

在JavaScript中没有class,也就是说没有class里的构造函数。那么object是怎么被创建的呢?

在JavaScript中每个对象都有一个constructor

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/javascript/javascript-new-keyword.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部