源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

深入浅出理解javaScript原型链

  • 时间:2022-09-15 04:44 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:深入浅出理解javaScript原型链
本文实例讲述了javaScript的原型链。分享给大家供大家参考。具体分析如下: 对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了。 看了这张图后突然对javascript有了质的理解。 [img]http://files.jb51.net/file_images/article/201505/201559103929093.gif?201549103956[/img] [b]javascript的原型链有显式和隐式两种:[/b] [b]显式原型链:[/b]即我们常见的prototype; [b]隐式原型链:[/b]在一般环境下无法访问,即不可见,在FireFox下可以通过__proto__方式访问;隐式原型链用于javascript引擎内部对原型链的搜寻,通过显示原型链来设置;   [b]一、prototype和__proto__的概念[/b] prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。 __proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性。 用chrome和FF都可以访问到对象的__proto__属性,IE不可以。 [b]二、new 的过程 [/b]
var Person = function(){};
var p = new Person();
new的过程拆分成以下三步: (1) var p={}; 也就是说,初始化一个对象p (2) p.__proto__ = Person.prototype; (3) Person.call(p); 也就是说构造p,也可以称之为初始化p 关键在于第二步,我们来证明一下:
var Person = function(){};
var p = new Person();
alert(p.__proto__ === Person.prototype);
这段代码会返回true。说明我们步骤2是正确的。 [b]三、示例[/b]
var Person = function(){};
Person.prototype.sayName = function() {
  alert("My Name is Jacky");
};
Person.prototype.age = 27;
var p = new Person();
p.sayName();
p是一个引用指向Person的对象。我们在Person的原型上定义了一个sayName方法和age属性,当我们执行p.age时,会先在this的内部查找(也就是构造函数内部),如果没有找到然后再沿着原型链向上追溯。 这里的向上追溯是怎么向上的呢?这里就要使用__proto__属性来链接到原型(也就是Person.prototype)进行查找。最终在原型上找到了age属性。 希望本文所述对大家的javascript程序设计有所帮助。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部