JavaScript:学习笔记(6)——New运算符

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

快速开始

  当你使用new关键字的时候,会

  • 创建一个新的对象
  • 将this绑定到该对象
  • 添加一个名为_prop_的新属性,并且指向构造函数的原型
  • 返回该this对象

  我们现在抛开结论,一步一步来看一下这个过程。

  首先定义一个构造函数Student,该函数接收两个参数name和age。

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变量。

  我们可以通过打印测试:

  

  接下来深入看看__proto__是怎么回事。

原型(Prototype)

  这个原型到底是什么东西呢?有一句话是这样说的

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

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

  

  现在我们来尝试定义一个新对象second,根据之前的解释second指向的对象会有一个__proto__属性,并且应该指向父亲的prototype,我们来测试一下:

  

  Student.prototype.constructor会指向Student的构造函数,我们打印出来看看:

  

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

  

  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

  在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:学习笔记(6)——New运算符的更多相关文章

  1. JavaScript:学习笔记(8)——对象扩展运算符

    JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...

  2. JavaScript:学习笔记(2)——基本概念与数据类型

    JavaScript:学习笔记(2)——基本概念与数据类型 语法 1.区分大小写.Test 和 test 是完全不同的两个变量. 2.语句最好以分号结束,也就是说不以分号结束也可以. 变量 1.JS的 ...

  3. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  4. C#.NET学习笔记7--11---算术运算符,变量赋值,变量的交换,布尔表达式1,布尔表达式2

    C#.NET学习笔记7---算术运算符 2013/9/6 技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com 1.Consol ...

  5. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  7. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  8. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  9. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

随机推荐

  1. hud项目lcd调试过程的一些见解

    1.帧缓冲(FrameBuffer)设备驱动帧缓冲设备为标准的字符型设备,在Linux中主设备号29,定义在/include/uapi/linux/major.h中的FB_MAJOR,次设备号定义帧缓 ...

  2. php之curl设置超时实例

    本文实例讲述了php中curl超时设置方法.分享给大家供大家参考.具体实现方法如下: 访问HTTP方式很多,可以使用curl, socket, file_get_contents() 等方法. 在访问 ...

  3. 2015 Spark 将走向哪里?

    在刚刚过去的spark submit上,Matei Zahara简单回顾了下2014年spark的发展,可用一个词来概括那就是"Amazing"!!! 那么2015年,spark ...

  4. 嵌入式开发之davinci--- 8148/8168/8127 中的音频alsa 采集

    1.snd_pcm_open,打开句柄. 2.配置参数,可能用到的接口:snd_pcm_hw_params_alloca.snd_pcm_hw_params_any.snd_pcm_hw_params ...

  5. 百度map

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. Asp.Net 无刷新文件上传并显示进度条的实现方法及思路

    相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦苦来 实现呢?我并不否认”拿来主义“,只是我个人更喜欢凡是求个所以 ...

  7. Android-ViewPagerIndicator框架使用——TabPageIndicator

    前言:TabPageIndicator这个类和之前的不大一样,他不仅提供了展示的功能,而且可以点击,下面的viewpager可以跳转的有点tabhost的感觉. 一:布局文件的定义,simple_ta ...

  8. ios - 上下滚动的新闻

    #import <UIKit/UIKit.h> @interface ScrollUpDownView : UIView //设置 要现实的文字 @property(nonatomic, ...

  9. Scrapy爬虫笔记

    Scrapy是一个优秀的Python爬虫框架,可以很方便的爬取web站点的信息供我们分析和挖掘,在这记录下最近使用的一些心得. 1.安装 通过pip或者easy_install安装: 1 sudo p ...

  10. linux 下shell程序(二)

    输入和输出 输入指的是Shell程序读入数据.有从文件读取.从用户输入读取等方式读入数据.输出指的是Shell程序的运行 结果的处理,可以显示到屏幕或保存到文件. 用ceho命令输出结果 echo $ ...