欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript初学者必看“new”

程序员文章站 2022-07-05 20:51:00
译者按: 本文简单的介绍了new, 更多的是介绍原型(prototype),值得一读。 原文:javascript for beginners: the ‘new' op...

译者按: 本文简单的介绍了new, 更多的是介绍原型(prototype),值得一读。

原文:javascript for beginners: the ‘new' operator

译者: fundebug

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习

当你使用new的时候,会:

1.创建一个新的空对象;
2.将this绑定到该对象;
3.添加一个名为__proto__的新属性,并且指向构造函数的原型(prototype);
4.返回该this对象。

如果你没有特别理解,那么我们接下来用例子来详细解释。首先定义一个构造函数student,该函数接收两个参数nameage

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

现在我们使用new来创建一个新的对象:

var first = new student('john', 26);

到底发生了什么呢?

1.一个新的对象创建,我们叫它obj
2.this绑定到obj,任何对this的引用就是对obj的引用;
3.__proto__属性被添加到obj对象。obj.__proto__会指向student.prototype
4.该obj对象被赋值给first变量。

我们可以通过打印测试:

console.log(first.name);
// john
console.log(first.age);
// 26

接下来深入看看__proto__是怎么回事。

原型(prototype)

每一个javascript对象都有一个原型。所有的对象都从它的原型中继承对象和属性。

打开浏览器开发者控制面板(windows: ctrl + shift + j)(mac: cmd + option + j),输入之前定义的student函数:

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

为了证实每一个对象都有原型,输入:

student.prototype;
// object {...}

你会看到返回了一个对象。现在我们来尝试定义一个新的对象:

var second = new student('jeff', 50);

根据之前的解释,second指向的对象会有一个__proto__属性,并且应该指向父亲的prototype,我们来测试一下:

second.__proto__ === student.prototype
// true

student.prototype.constructor会指向student的构造函数,我们打印出来看看:

student.prototype.constructor;
// function student(name, age) {
// this.name = name;
// this.age = age;
// }

好像事情越来越复杂了,我们用图来形象描述一下:

JavaScript初学者必看“new”

student的构造函数有一个叫.prototype的属性,该属性又有一个.constructor的属性反过来指向student构造。它们构成了一个环。当我们使用new去创建一个新的对象,每一个对象都有.__proto__属性反过来指向student.prototype

这个设计对于继承来说很重要。因为原型对象被所有由该构造函数创建的对象共享。当我们添加函数和属性到原型对象中,其它所有的对象都可以使用。

在本文我们只创建了两个student对象,如果我们创建20,000个,那么将属性和函数放到prototype而不是每一个对象将会节省非常很多的存储和计算资源。

我们来看一个例子:

student.prototype.sayinfo = function(){
 console.log(this.name + ' is ' + this.age + ' years old');
}

我们为student的原型添加了一个新的函数sayinfo – 所以使用student创建的学生对象都可以访问该函数。

second.sayinfo();
// jeff is 50 years old

创建一个新的学生对象,再次测试:

var third = new student('tracy', 15);
// 如果我们现在打印third, 虽然只会看到年龄和名字这两个属性,
// 仍然可以访问sayinfo函数。
third;
// student {name: "tracy", age: 15}
third.sayinfo();
// tracy is 15 years old

在javascript中,首先查看当前对象是否拥有该属性;如果没有,看原型中是否有该属性。这个规则会一直持续,直到成功找到该属性或则到最顶层全局对象也没找到而返回失败。

继承让你平时不需要去定义tostring()函数而可以直接使用。因为tostring()这个函数内置在object的原型上。每一个我们创建的对象最终都指向object.prototype,所以可以调用tostring()。当然, 我们也可以重写这个函数:

var name = {
 tostring: function(){
 console.log('not a good idea');
 }
};
name.tostring();
// not a good idea

创建的name对象首先查看是否拥有tostring,如果有就不会去原型中查找。

总结

也许这些概念对你来说有点多,但是当你理解了,使用原型可以让你写出更加高效的代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。