JavaScript初学者必看“new”


Posted in Javascript onJune 12, 2017

译者按: 本文简单的介绍了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,如果有就不会去原型中查找。

总结

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

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

Javascript 相关文章推荐
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
微信小程序 122100版本更新问题解决方案
Dec 22 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
javascript 判断用户有没有操作页面
Oct 17 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
详解vue.js 开发环境搭建最简单攻略
Jun 12 #Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 #Javascript
微信小程序 实现点击添加移除class
Jun 12 #Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 #Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 #Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 #Javascript
原JS实现banner图的常用功能
Jun 12 #Javascript
You might like
PHP 多进程 解决难题
2009/06/22 PHP
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
浅析php中json_encode()和json_decode()
2014/05/25 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
用js自动判断浏览器分辨率的代码
2007/01/28 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
JavaScript制作的可折叠弹出式菜单示例
2014/04/04 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
python找出因数与质因数的方法
2019/07/25 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
使用before和:after伪类制作css3圆形按钮
2014/04/08 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
师范应届毕业生自荐信
2013/11/18 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
希特勒的演讲稿
2014/05/23 职场文书
专项法律服务方案
2014/06/11 职场文书
健康证明
2015/06/19 职场文书
2015年科普工作总结
2015/07/23 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python