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 相关文章推荐
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
Easyui和zTree两种方式分别实现树形下拉框
Aug 04 Javascript
React组件中的this的具体使用
Feb 28 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
vue element-ui读取pdf文件的方法
Nov 26 Javascript
详解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调用Java对象的方法
2006/10/09 PHP
PHP 模拟$_PUT实现代码
2010/03/15 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
php中filter_input函数用法分析
2014/11/15 PHP
php实现插入排序
2015/03/29 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php array_key_exists() 与 isset() 的区别
2016/10/24 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JavaScript生成二维码图片小结
2015/12/27 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
利用express启动一个server服务的方法
2017/09/17 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
Python深入学习之装饰器
2014/08/31 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
介绍一下Java中标识符的命名规则
2014/02/03 面试题
学生自我评价范文
2014/02/02 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
爱心捐书活动总结
2014/07/05 职场文书
干部作风建设工作总结
2014/10/29 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
《春酒》教学反思
2016/02/22 职场文书
MySQL 服务和数据库管理
2021/11/11 MySQL
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
Python中的嵌套循环详情
2022/03/23 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js