对象

 function f1(){
};
typeof f1 //"function"函数对象 var o1 = new f1();
typeof o1 //"object"普通对象 var o2 = {};
typeof o2 //"object"普通对象

JavaScript中将对象分为普通对象函数对象

使用函数对象可以创建普通对象,普通对象没法创建函数对象。

凡是通过new Function创建的对象都是函数对象,其他都是普通对象(通常通过Object创建),可以通过typeof来判断。

原型对象(prototype

Prototype

Prototype有原型、蓝本的意思,只有函数对象才会有原型(prototype)。

所谓原型,就是函数用来创建实例(普通)对象的蓝本(原型)。

每个原型都有一个 constructor 属性指向关联的构造函数。

__proto__

每一个JavaScript对象(除了 null )都具有的一个属性,叫__proto__,这个属性会指向该对象的原型(prototype)。

constructor

构造函数,即用来创建实例的函数,即关联的函数对象本身。

验证

在火狐或者谷歌浏览器控制台中新建一个普通对象,查看他的属性。

 var o = {};
console.log(o.prototype); //undefined 普通对象没有prototype属性
console.log(o instanceof Object); //true o是Object的实例
console.log(o.__proto__ === Object.prototype) //true o的__proto__指向Object的prototype
console.log(Object === Object.prototype.constructor) //true Object.prototype.constructor指向Object本身
console.log(Object.prototype.constructor) //function Object() 函数对象原型的构造函数指向这个函数
console.log(Object.prototype.__proto__); //null Object.prototype的__proto__为null,为原型链终点

新建一个函数对象,查看他的属性。

 function Demo() { };
var f1 = new Demo();
console.log(f1.prototype); //undefined 通过函数对象穿创建的是普通对象,Demo本身是函数对象
console.log(f1 instanceof Demo); //true f1是Demo的实例
console.log(f1.__proto__ === Demo.prototype); //true
console.log(Demo === Demo.prototype.constructor);//true
console.log(Demo.prototype.__proto__ === Object.prototype);//true Demo原型的__proto__指向Object的原型prototype
console.log(Object.prototype.__proto__); //null

原型的重要功能就是用作继承。

原型链(prototype chain

javascript中,每个对象都会在内部生成一个__proto__ 属性,当我们访问一个对象属性时,如果这个对象不存在就回去__proto__ 指向的对象里面找,一层一层找下去,这就是javascript原型链的概念。

提升:

  1. 在原型链上查找属性比较耗时,对性能有副作用,这在性能要求苛刻的情况下很重要。另外,试图访问不存在的属性时会遍历整个原型链。
  2. 遍历对象的属性时,原型链上的每个可枚举属性都会被枚举出来。要检查对象是否具有自己定义的属性,而不是其原型链上的某个属性,则必须使用对象从Object.prototype继承的 hasOwnProperty 方法。(使用 for in 遍历对象时推荐总是使用 hasOwnProperty 方法)

继承

JavaScript 并没有其他基于类的语言所定义的“方法”。在 JavaScript 里,任何函数都可以添加到对象上作为对象的属性。函数的继承与其他的属性继承没有差别。

继承意味着复制操作,在Java和C#中,继承是完全复制生成新的对象。然而 JavaScript 默认并不会复制对象的属性,相反,JavaScript 只是在两个对象之间创建一个关联,这样,一个对象就可以通过委托访问另一个对象的属性和函数,所以与其叫继承,委托的说法反而更准确些。

结论

在编写使用它的复杂代码之前,理解原型继承模型是至关重要的。此外,请注意代码中原型链的长度,并在必要时将其分解,以避免可能的性能问题。此外,原生原型不应该被扩展,除非它是为了与新的JavaScript特性兼容。

参考文档: https://www.jb51.net/article/123976.htm

      https://github.com/mqyqingfeng/Blog/issues/2

      https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

JavaScript进阶之原型链的更多相关文章

  1. 对Javascript 类、原型链、继承的理解

    一.序言   和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承 ...

  2. 图解JavaScript中的原型链

    转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof o ...

  3. javascript进阶-《原型对象和原型链》

    原创发布 by @一像素 2015.12 在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象Object 和 函数对象Function. 一般而言,通过new Fun ...

  4. javaScript里的原型链

    原型对象也是普通的对象,是对象一个自带隐式的__proto__属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链.原型链是由一些用来继承和共享属性的对象组成的( ...

  5. JavaScript继承与原型链

    对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了c ...

  6. 一张图搞懂 Javascript 中的原型链、prototype、__proto__的关系 转载加自己的总结

    1. JavaScript内置对象 所谓的内置对象 指的是:JavaScript本身就自己有的对象 可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象    ...

  7. 前端入门15-JavaScript进阶之原型链

    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...

  8. JavaScript中的原型链原理

    工作中经常解除到prototype的概念,一开始错误的认为prototype是对象的原型链,其实prototype只能算是JavaScript开放出来的原型链接口,真正的原型链概念应该是__proto ...

  9. Javascript 组合继承 原型链继承 寄生继承

    Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["re ...

随机推荐

  1. centos6.0 配置SVN

    基本步骤: 1.安装必需的subversion 2.创建版本库 3.配置用户和权限 4.钩子和svn常用命令说明 一.安装subversion 在这里我们使用yum来安装subversion,使用以下 ...

  2. Qt开发环境的搭建

    首先讲讲为什么要用Qt这个东东吧!用了以后才知道,这门语言真的很不错,我权当把它当成了类库来用,Linux本身的C语言编程是很烦的,比如说串口编程,虽说C编程也不难,但是使用Qt这种封装的类库来操作的 ...

  3. 实战c++中的vector系列--正确释放vector的内存(clear(), swap(), shrink_to_fit())

    关于vector已经写的差不多了,似乎要接近尾声了,从初始化到如何添加元素再到copy元素都有所涉及,是时候谈一谈内存的释放了. 是的,对于数据量很小的vector,完全没必要自己进行主动的释放,因为 ...

  4. SpringMVC(一) 简单代码编写,注解,重定向与转发

    SpringMVC是什么 SpringMVC是目前最好的实现MVC设计模式的框架,是Spring框架的一个分支产品,以SpringIOC容器为基础,并利用容器的特性来简化它的配置.SpringMVC相 ...

  5. sql 分割日期

    datename(Year,CreateTime)   ==2017 datename(Month,CreateTime)   7 1.获取星期(显示中文如:星期一) Select DateName( ...

  6. BAT 解密(四):配置中心、服务中心、异步技术细节

    在系列文章的第二篇文章< BAT解密(二):聊聊业务如何驱动技术发展 >中我们深入分析了互联网业务发展的一个特点:复杂性越来越高.复杂性增加的典型现象就是系统越来越多,当系统的数量增加到一 ...

  7. 对称平方数(to_string函数,stoi函数真香)

    题目描述 打印所有不超过n(n<256)的,其平方具有对称性质的数.如11*11=121. 输入描述: 无 输出描述: 每行一个数,表示对称平方数. 示例1 输入 复制 无 输出 复制 无解题思 ...

  8. iOS开发——GCD总结

    Grand Central Dispatch,简称GCD,在异步执行任务的技术之一. 一般将应用程序中记述的线程管理用的代码在系统级中实现,开发者只需要定义想执行的任务并追加到适当的Dispatch ...

  9. Linux下重启mysql数据库的方法

    原文地址:Linux下重启mysql数据库的方法作者:于士博的视频教程 方法一: 命令: [root@localhost /]# /etc/init.d/mysql   start|stop|rest ...

  10. BZOJ 3529 [Sdoi2014]数表 (莫比乌斯反演+树状数组+离线)

    题目大意:有一张$n*m$的数表,第$i$行第$j$列的数是同时能整除$i,j$的所有数之和,求数表内所有不大于A的数之和 先是看错题了...接着看对题了发现不会做了...刚了大半个下午无果 看了Po ...