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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
利用毫秒减值计算时长的js代码
Sep 22 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
编写高效jQuery代码的4个原则和5个技巧
Apr 24 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
Jun 13 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
Jul 31 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
详解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
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
vue-axios使用详解
2017/05/10 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
vue项目中使用scss的方法步骤
2019/05/16 Javascript
小程序组件之自定义顶部导航实例
2019/06/12 Javascript
讲解Python中fileno()方法的使用
2015/05/24 Python
浅谈python内置变量-reversed(seq)
2017/06/21 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
意向协议书范本
2014/04/23 职场文书
计划生育目标责任书
2015/05/09 职场文书
幼儿园毕业典礼园长致辞
2015/07/29 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
Python PIL按比例裁剪图片
2022/05/11 Python