深入浅出理解javaScript原型链_javascript技巧

本文实例讲述了javaScript的原型链。分享给大家供大家参考。具体分析如下:

对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了。

看了这张图后突然对javascript有了质的理解。

javascript的原型链有显式和隐式两种:

显式原型链:即我们常见的prototype;

隐式原型链:在一般环境下无法访问,即不可见,在FireFox下可以通过__proto__方式访问;隐式原型链用于javascript引擎内部对原型链的搜寻,通过显示原型链来设置;
 
一、prototype和__proto__的概念

prototype是函数的一个属性(每个函数都有一个prototype属性),这个属性是一个指针,指向一个对象。它是显示修改对象的原型的属性。

__proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性。

用chrome和FF都可以访问到对象的__proto__属性,IE不可以。

二、new 的过程

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是正确的。

三、示例

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程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
原型链
深入浅出javascript、深入浅出的javascript、javascript 原型链、javascript 原型、javascript 原型继承,以便于您获取更多的相关知识。

时间: 2024-10-03 02:12:30

深入浅出理解javaScript原型链_javascript技巧的相关文章

理解JavaScript原型链_javascript技巧

每一个JavaScript对象都和另一个对象相关联,相关联的这个对象就是我们所说的"原型".每一个对象都会从原型继承属性和方法.有一个特殊的对象没有原型,就是Object.在之后的图示中会进行说明. 举个栗子,我们首先声明一个函数Student(): function Student(name){ this.name = name; this.hello = function(){ alert(`Hello,${this.name}`); } } 这个函数包含一个属性name和一个方法

深入浅出理解javaScript原型链

  这篇文章主要介绍了对javaScript原型链的理解,以实例形式对javaScript原型链的概念及相关使用技巧做了较为浅显易懂的分析,需要的朋友可以参考下 本文实例讲述了javaScript的原型链.分享给大家供大家参考.具体分析如下: 对于javascript原型链,以前都觉得是个很深的东西,一直没有理解很明白,今天看了一些介绍后,发现这张图,表示再没有什么语言能比这张图说得清楚了. 看了这张图后突然对javascript有了质的理解. javascript的原型链有显式和隐式两种: 显

深入理解javascript原型链和继承_javascript技巧

在上一篇文章中,介绍了原型的概念,了解到在javascript中构造函数.原型对象.实例三个好基友之间的关系:每一个构造函数都有一个"守护神"--原型对象,原型对象心里面也存着一个构造函数的"位置",两情相悦,而实例呢却又"暗恋"着原型对象,她也在心里留存了一个原型对象的位置. javascript本身不是面向对象的语言,而是基于对象的语言,对于习惯了其他OO语言的人来说,起初有些不适应,因为在这里没有"类"的概念,或者说&q

图文详解JavaScript的原型对象及原型链_javascript技巧

对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__proto__混淆,二来它们之间的各种指向实在有些复杂,其实市面上已经有非常多的文章在尝试说清楚,有一张所谓很经典的图,上面画了各种线条,一会连接这个一会连接那个,说实话我自己看得就非常头晕,更谈不上完全理解了.所以我自己也想尝试一下,看看能不能把原型中的重要知识点拆分出来,用最简单的图表形式说清楚. 我们知道原型是一个对象,其他对象可以通过它实现属性继承.但是尼玛除了prototype,又有一个__

跟我学习javascript的prototype原型和原型链_javascript技巧

用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了,最近看了一些 JavaScript高级程序设计,终于揭开了其神秘面纱. 每个函数都有一个prototype属性,这个属性是指向一个对象的引用,这个对象称为原型对象,原型对象包含函数实例共享的方法和属性,也就是说将函数用作构造函数调用(使用new操作符调用)的时候,新创建的对象会从原型对象上继承属性和

浅谈JS原型对象和原型链_javascript技巧

在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对象都是普通对象. 举例说明: function f1(){ //todo } var f2 = function(){ //todo }; var f3 = new Function('x','console.log(x)'); var o1 = {}; var o2 = new Object();

理解javascript对象继承_javascript技巧

先从一个问题进行研究深入,什么是javascript对象继承? 比如我们有一个"动物"对象的构造函数. function animal() { this.type = '动物'; } 还有一个"猫"对象的构造函数. function cat(name,color) { this.name = name; this.color = color; } 我们知道猫也属于动物,如果这个猫对象想要继承动物对象的属性,我们该怎么做呢? 构造函数绑定 使用构造函数绑定是最简单的方

深入理解JavaScript系列(6) 强大的原型和原型链_javascript技巧

前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统的类继承还要强大.实现传统的类继承模型是很简单,但是实现 JavaScript 中的原型继承则要困难的多. 由于 JavaScript 是唯一一个被广泛使用的基于原型继承的语言,所以理解两种继承模式的差异是需要一定时间的,今天我们就来了解一下原型和原型链. 原型 10年前,我刚学习JavaScript的时候,一般都是用

学习javascript面向对象 理解javascript原型和原型链_javascript技巧

先看一张图,梳理梳理. 一.基本概念 [原型链]每个构造函数都有一个对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,如果原型对象等于另一个原型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针.如果另一个原型又是另一个原型的实例,那么上述关系依然成立.如此层层递进,就构成了实例与原型的链条.[原型对象]这个对象包含可以由特定类型的所有实例共享的属性和方法.所有引用类型默认都继承了Object,而