JavaScript初学者必看“new”

前端之家收集整理的这篇文章主要介绍了JavaScript初学者必看“new”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

原文:nofollow" target="_blank" href="https://hackernoon.com/javascript-for-beginners-the-new-operator-cee35beb669e">JavaScript For Beginners: the ‘new' operator

译者: Fundebug

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

当你使用

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

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

现在我们使用

到底发生了什么呢?

1.一个新的对象创建,我们叫它属性被添加到obj对象。

我们可以通过打印测试:

接下来深入看看

原型(Prototype)

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

打开浏览器开发者控制面板(Windows: Ctrl + Shift + J)(Mac: Cmd + Option + J),输入之前定义的函数:

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

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

根据之前的解释,属性,并且应该指向父亲的

函数,我们打印出来看看:

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

函数有一个叫属性,该属性又有一个属性反过来指向Student构造。它们构成了一个环。当我们使用属性反过来指向

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

在本文我们只创建了两个属性和函数放到

我们来看一个例子:

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

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

属性,// 仍然可以访问sayInfo函数。 third; // Student {name: "Tracy",age: 15} third.sayInfo(); // Tracy is 15 years old

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

继承让你平时不需要去定义函数而可以直接使用。因为函数内置在调用toString()。当然, 我们也可以重写这个函数

创建的name对象首先查看是否拥有

总结

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

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

猜你在找的JavaScript相关文章