JavaScript初学者必看“new”

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

为了保证可读性,本文采用意译而非直译。

当你使用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;
//  }

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

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,如果有就不会去原型中查找。

总结

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

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了7亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

版权声明

转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/05/25/javascript-new-for-beginner/

原文地址:http://blog.51cto.com/13957060/2317450

时间: 2024-10-05 12:07:59

JavaScript初学者必看“new”的相关文章

JavaScript初学者必看“this”

译者按: JavaScript的this和Java等面向对象语言中的this大不一样,bind().call()和apply()函数更是将this的灵活度进一步延伸. 原文: JavaScript: The Keyword 'This' for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 如果对JavaScript的关键字this理解不够深刻,有时候会掉入意想不到的坑.在这里我们总结了5条通用规则来帮助你判断t

JavaScript初学者必看“箭头函数”

译者按: 箭头函数看上去只是语法的变动,其实也影响了this的作用域. 原文: JavaScript: Arrow Functions for Beginners 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 本文我们介绍箭头(arrow)函数的优点. 更简洁的语法 我们先来按常规语法定义函数: function funcName(params) { return params + 2; } funcName(2); // 4 该函

15条初学者必看的JavaScript快速小贴士

(本图为:15条初学者必看的JavaScript快速小贴士) 今天小编为了我们的初学JavaScript的小伙伴们简单介绍下这门编程语言,更好的帮助你们来深入的学习它,使用它: JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaScript 是因特网上最流行的脚本语言. JavaScript 很容易使用!你一定会喜欢它的! 为了能够帮助那些刚开始接触 JavaScript 的人,我

Linux技术学习要点,您掌握了吗---初学者必看

Linux技术学习要点,您掌握了吗---初学者必看 1.如何做好嵌入式Linux学习前的准备? 要成为一名合格的嵌入式Linux工程师,就需要系统的学习软.硬件相关领域内的知识,需要在最开始就掌握开发的规范和原则,养成良好的工作习惯.为了确保学习的效果,信盈达安排的整个课程体系是非常集中.高效的,这就要求准备参加嵌入式Linux就业课程学习的同学要调整好自己的时间,务必要确保在4个多月的学习时间内能够高度集中精力.兄弟连Linux培训. 在整个集中学习过程中,既要保证课上认真听讲.实战演练的时间

15个初学者必看的基础SQL查询语句

本文将分享15个初学者必看的基础SQL查询语句,都很基础,但是你不一定都会,所以好好看看吧. 1.创建表和数据插入SQL 我们在开始创建数据表和向表中插入演示数据之前,我想给大家解释一下实时数据表的设计理念,这样也许能帮助大家能更好的理解SQL查询. 在数据库设计中,有一条非常重要的规则就是要正确建立主键和外键的关系. 现在我们来创建几个餐厅订单管理的数据表,一共用到3张数据表,Item Master表.Order Master表和Order Detail表. 创建表: 创建Item Maste

javascript 箭头函数的使用 初学者必看

为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 本文我们介绍箭头(arrow)函数的优点. 更简洁的语法我们先来按常规语法定义函数: 1 2 3 4 5 function funcName(params) { return params + 2; } funcName(2); // 4 该函数使用箭头函数可以使用仅仅一行代码搞定! 1 2 3 var funcName = (params) => params + 2 funcName(2); // 4 是不是

linux学习心得linux初学者必看

很多同学接触Linux不多,对Linux平台的开发更是一无所知. 而现在的趋势越来越表明,作为一个优秀的软件开发人员,或计算机IT行业从业人员, 掌握Linux是一种很重要的谋生资源与手段. 下来我将会结合自己的几年的个人开发经验,及对 Linux,更是类UNIX系统,及开源软件文化, 谈谈Linux的学习方法与学习中应该注意的一些事. 1.Linux基础 你得挑一个适合你的系统,然后在虚拟机安装它,开始使用它. 如果你想快速学会Linux,我有一个建议就是忘记图形界面,不要想图形界面能不能提供

JavaScript 学者必看“new”

当你使用new的时候,会: 1.创建一个新的空对象: 2.将this绑定到该对象: 3.添加一个名为__proto__的新属性,并且指向构造函数的原型(prototype): 4.返回该this对象. 如果你没有特别理解,那么我们接下来用例子来详细解释.首先定义一个构造函数Student,该函数接收两个参数name和age. function Student(name, age){ this.name = name; this.age = age; } 现在我们使用new来创建一个新的对象: v

WEB前端开发初学者必看的学习路线

大家经常跟我要一些 web前端的学习路线和一些vue.angular.react教程,我自己很懒,自己没整理过系统的教程,因为网上也多的是,有时间我会普及一些入门和提升建议,思想提升了,路线明确了自然就好了,于是就整理了下这篇javaScript简介介绍帮助大家了解前端,学习资料和学习路线,干货福利内容 在文末↓第一阶段--HTML的学习HTML的中文全称为超文本标记语言,它是一个网页的框架,不论是动态网页还是静态网页最终返回到浏览器端的都是HTML代码.浏览器将HTML代码解释渲染后呈现给用户