`

Js 原型对象与原型链(转)

 
阅读更多

文章出处:http://www.cnblogs.com/xqhppt/archive/2012/02/01/2334355.html

 

原型对象

  每个javascript对象都有一个原型对象,这个对象在不同的解释器下的实现不同。比如在firefox下,每个对象都有一个隐藏的__proto__属性,这个属性就是“原型对象”的引用。

原型链

  由于原型对象本身也是对象,根据上边的定义,它也有自己的原型,而它自己的原型对象又可以有自己的原型,这样就组成了一条链,这个就是原型链,JavaScritp引擎在访问对象的属性时,如果在对象本身中没有找到,则会去原型链中查找,如果找到,直接返回值,如果整个链都遍历且没有找到属性,则返回undefined.原型链一般实现为一个链表,这样就可以按照一定的顺序来查找。

示例1

var base = { 
    name : "base"
    getInfo : function(){ 
       return this.name; 
    
    
var ext1 = { 
    id : 0, 
    __proto__ : base 
    
var ext2 = { 
    id : 9, 
    __proto__ : base 
    
print(ext1.id); 
print(ext1.getInfo()); 
print(ext2.id); 
print(ext2.getInfo()); 

 结果

0
base
9
base

 图1

  可以看到,当执行ext1.id时,引擎在ext1对象本身中就找到了id属性,因此返回其值0,当执行ext1.getInfo时,ext1对象中没有找到,因此在其原型对象base中查找,找到之后,执行这个函数,得到输出”base”。

我们将上例中的ext1对象稍加修改,为ext1对象加上name属性:

示例2

var base = { 
    name : "base"
    getInfo : function(){ 
       return this.name; 
    
    
var ext1 = { 
    id : 0, 
    name : "ext1",    
    __proto__ : base 
    
print(ext1.id); 
print(ext1.getInfo()); 

 结果

0
ext1

  这个运行效果同样验证了原型链的运行机制:从对象本身出发,沿着__proto__查找,直到找到属性名称相同的值(没有找到,则返回undefined)。

我们对上例再做一点修改,来更好的演示原型链的工作方式:

示例3

var base = { 
    name : "base"
    getInfo : function(){ 
       return this.id + ":" + this.name; 
    
    
var ext1 = { 
    id : 0, 
    __proto__ : base 
    
print(ext1.getInfo()); 

 结果

0:base

   应该注意的是,getInfo函数中的this表示原始的对象,而并非原型对象。上例中的id属性来自于ext1对象,而name来自于base对象。这个特性的机制在10.3小节再做讨论。如果对象没有显式的声明自己的”__proto__”属性,这个值默认的设置为Object.prototype,而Object.prototype的”__proto__”属性的值为”null”,标志着原型链的终结。

构造器

  我们在来讨论一下构造器,除了上边提到的直接操作对象的__proto__属性的指向以外,JavaScript还支持构造器形式的对象创建。构造器会自动的为新创建的对象设置原型对象,此时的原型对象通过构造器的prototype属性来引用。

我们以例子来说明,将Task函数作为构造器,然后创建两个实例task1, task2:

示例4

function Task(id){ 
    this.id = id; 
    
Task.prototype.status = "STOPPED"
Task.prototype.execute = function(args){ 
    return "execute task_"+this.id+"["+this.status+"]:"+args; 
    
var task1 = new Task(1); 
var task2 = new Task(2); 
    
task1.status = "ACTIVE"
task2.status = "STARTING"
    
print(task1.execute("task1")); 
print(task2.execute("task2")); 

 结果

execute task_1[ACTIVE]:task1
execute task_2[STARTING]:task2

   构造器会自动为task1,task2两个对象设置原型对象Task.prototype,这个对象被Task(在此最为构造器)的prototype属性引用,参看下图中的箭头指向。

图2

  由于Task本身仍旧是函数,因此其”__proto__”属性为Function.prototype, 而内建的函数原型对象的”__proto__”属性则为Object.prototype对象。最后Obejct.prototype的”__proto__”值为null。

分享到:
评论

相关推荐

    js 原型对象和原型链理解

    之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂的东西用最简单的话语描述出来,那就说明你...

    js原型链详解

    ### JavaScript原型与原型链详解 JavaScript作为一门基于原型的语言,其原型和原型链的概念是理解和掌握JS继承机制的关键。接下来将详细阐述这些概念。 #### 普通对象与函数对象 在JavaScript中,一切皆为对象,...

    原生JS原型对象练习

    原型链是JavaScript中对象之间的引用关系,它使得一个对象可以访问其构造函数的原型对象的属性和方法。当我们尝试访问一个对象的属性时,如果该对象本身没有这个属性,JavaScript会向上查找该对象的原型,直到找到该...

    JavaScript原型链

    JavaScript中的构造函数、`new`操作符和`prototype`属性也与原型链紧密相关。当我们使用`new`关键字调用一个构造函数时,会创建一个新的对象,这个新对象的`[[Prototype]]`被设置为构造函数的`prototype`属性所指向...

    详解js中的原型,原型对象,原型链.docx

    ### 详解JS中的原型、原型对象与原型链 #### 前言 JavaScript是一种基于原型的语言,这使得它与其他面向对象编程语言有所不同。在JavaScript中,每个对象都有一个原型对象,而原型对象又可能有自己的原型对象,从而...

    详解js中的原型,原型对象,原型链

    在JavaScript中,原型、原型对象和原型链是理解面向对象编程的关键概念。下面将深入解析这三个概念,并通过实例展示它们的工作原理。 首先,**原型**是JavaScript中的一个核心概念,它允许对象之间共享属性和方法。...

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

    JavaScript的原型对象和原型链是理解JavaScript继承机制的关键概念。首先,我们来区分两个关键的属性:`prototype`和`__proto__`。 1. `prototype`:主要用于构造函数,它是构造函数的一个属性,用于定义实例对象将...

    【技术分享】从浅入深 Javascript 原型链与原型链污染 .pdf

    JavaScript 原型链是语言的核心特性之一,它在实现对象的继承和共享属性时起着关键作用。本文将深入探讨JavaScript原型链的工作原理及其可能导致的安全问题——原型链污染。 首先,JavaScript 中的对象继承并不像...

    浅谈JS原型对象和原型链

    JavaScript中的原型对象和原型链是理解其面向对象特性的核心概念。万物皆对象,而对象又分为普通对象和函数对象。函数对象通过`new Function`创建,如`f1`、`f2`和`f3`,而普通对象则通过对象字面量或`new`表达式...

    JS原型和原型链原理与用法实例详解

    JS原型和原型链是JavaScript语言中的核心概念,它们构成了JavaScript对象继承的基础。在JavaScript中,对象可以通过原型链实现对其他对象的属性和方法的继承。下面我们将详细讲解这两个概念以及它们的工作原理。 **...

    JavaScript — 原型链与作用域链1

    JavaScript是一种广泛用于网页和网络应用的脚本语言,它的核心特性包括原型链和作用域链。这两个概念是理解JavaScript中对象继承和变量访问的关键。 **作用域链** 1. **作用域生成**:每次JavaScript代码执行时,...

    JavaScript:对象与原型链教程.docx

    JavaScript:对象与原型链教程.docx

    深入理解javascript原型和闭包

    深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系

    基于js原型链的小游戏

    在这个"基于js原型链的小游戏"中,我们看到JavaScript的核心概念——原型链(Prototype Chain)被巧妙地应用于实现游戏逻辑。 原型链是JavaScript实现继承的主要机制,它通过内部的`__proto__`属性将对象链接起来,...

    JavaScript原型链简单图解

    JavaSciptDOM基本操作,JavaScipt函数基础,JavaScipt流程语句,JavaScript变量,JavaScript数据类型,JavaScript数组,JavaScript正则表达式,JavaScript字符串函数,Window对象等图解。JS高手进阶的工具图谱

    深度探讨javascript函数的原型链和闭包

    `[[Prototype]]`是每个JavaScript原生对象内置的原型属性,但不能直接访问,只能在查找原型链时由JavaScript引擎使用。它是JavaScript实现继承的基础。而`prototype`是函数对象的属性,可以直接通过JavaScript访问。...

    JS的原型和原型链.pdf

    在深入探讨JavaScript(JS)的原型和原型链之前,我们需要对一些基本概念有所了解,以便更好地理解文档内容。 1. 什么是原型? 原型是JavaScript中每个对象都具有的属性,它是一个内部链接,指向另一个对象。通过这...

    第15章 javascript面向对象与原型

    总的来说,JavaScript中的面向对象编程与传统的基于类的OOP有所不同,它通过原型链和构造函数来实现对象的创建和继承。正确理解并运用这些概念,可以让开发者更有效地利用JavaScript进行面向对象的编程。

Global site tag (gtag.js) - Google Analytics