设为首页收藏本站

IT技术擎 - 最棒的IT web技术交流社区

 找回密码
 注册为IT技术擎人

QQ登录

只需一步,快速开始

搜索
热搜: php h5 jquery
查看: 32|回复: 0

[javascript] javascript 之原型、原型链-14

[复制链接]
发表于 2018-5-13 02:09:59 | 显示全部楼层 |阅读模式
原型原型是一个对象,每个函数对象(在javascript 之对象中说过函数也是对象 )都有一个属性(prototype)指向这个对象--原型对象,这个对象的作用是让所有对象实例共享原型对象中的属性、方法。即我们可以把公共的属性、方法写在这个原型中,所以说js中的继承是基于原型实现的; 构造函数、原型、实例每个构造函数都有一个原型对象,原型对象包含一个指针指向构造函数,而实例包含一个指向原型对象的内部指针;
  1. 1 functionPerson(name,age){
  2. 2 this.name=name;
  3. 3 this.age=age;
  4. 4 }
  5. 5 console.dir(Person);
复制代码
如图: Person 有个属性prototype 指向原型对象 原型对象通过constructor 指向函数对象
  • prototype 函数才具有的属性,指向构造函数的原型对象;
  • JavaScript中的对象,都有一个内置属性 [[Prototype]] (在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf()) _proto_ 指向创建它的函数对象的原型对象;
  1. Object.getPrototypeOf() 可以查看MDN的介绍:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf
复制代码
原型链概念  原型链是一种机制,指的是JavaScript每一个对象、包括原型对象都有一个内部的[[proto]]属性,它指向创建它的函数对象的原型对象。这个属性是编程不可见的(虽然ES6标准中开放了这个属性,然而浏览器对这个属性的可见性的支持不同)。   当一个对象需要引用一个属性时,JavaScript引擎首先会从这个对象自身的属性表中寻找这个属性标识,如果找到则进行相应读写操作,如果没有在自身的属性表中找到,则在_proto_属性引用的对象(原型对象)的属性表中查找,如此往复,直到找到这个属性或者_proto_属性指向null为止(object prototype )。
对象的_proto_的引用链,称为原型链。注意:有一个性能优化的问题:原型链越深,耗费的时间越多,同理作用域链也是这样。 作用  原型链的存在,主要是为了实现对象的继承。 涉及几个重要的概念理解原型链,需要从几个概念入手。 1、函数对象在JavaScript中,函数也是对象。 2、原型对象当定义一个函数对象时,会包含一个内部属性,叫prototype称之为原型对象。
  1. 1//普通对象2vara ={};
  2. 3console.log(a.prototype);//undefined
复制代码
3、__proto__在创建对象的时候,都会有一个[[proto]]的内部属性,用于指向创建它的函数对象的prototype(函数对象prototype 指向函数的原型对象)。原型对象也有[[proto]]属性,因此在不断的指向中,形成了原型链。 举个例子来说,我们将对象F的原型对象修改一下,就可以清楚看到上述的关系
  1. 1functionF(){};
  2. 2varf = newF();
  3. 3console.log(f.__proto__);
复制代码
4、new当使用new去调用构造函数时,相当于执行了
  1. 1varo ={};
  2. 2o.__proto__ =F.prototype;
  3. 3F.call(o);
复制代码
在原型链的实现上,new起到了很关键的作用。 5、constructor原型对象prototype上都有个constructor属性,指向它的函数对象,如上图。 在实际运用中,经常这样写:
  1. 1functionF(){};
  2. 2F.prototype ={
  3. 3 constructor : F,
  4. 4 doSomething : function(){}
  5. 5}
复制代码
这里要加constructor是因为重写了原型对象,之前的constructor属性跟重写的原型对象没有任何关系,所以需要自己手动补上。 6、原型链结构
  1. 1functionF(){
  2. 2 this.name = 'zhang';
  3. 3};
  4. 4varf1 = newF();
  5. 5varf2 = newF();
复制代码

完整原型链



上一篇:使用 Hadoop 进行语料处理(面试题)
下一篇:如何在windows系统下安装swoole
该用户未在地球留下任何的痕迹

本版积分规则

QQ|小黑屋|帮助|IT技术擎 ( 沪ICP备15054863号  

GMT+8, 2018-10-18 12:03

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表