javascript之对象,原型链

对象

ECMAScript是高度抽象的面向对象语言,处理对象的。同样也有基本类型,但是他们在需要的情况下,也可以转型成对象。

定义: 对象是拥有一系列属性以及唯一的原型对象。那原型对象可能是对象,也可能为空。

让我们看一个基本对象的例子。对象的原型是通过内部的[[Prototype]]来引用的。然而,我们将会用 __<internal_property>__

下化线符号替代双中括号,那么对于原型对象: __proto__。

对于下面代码:

var foo = {
   x: 10,
   y:20
};

我们的结构具有两个明确的属性和一个内部__proto__属性,__proto__属性是对foo的原型的引用。

那么这些属性有什么用呢?让我们看一看原型链来回答这个问题。

原型链

原型对象仅仅是简单对象,以及或许拥有他们各自的属性。如果一个原型引用了非空对象到它的原型属性上,依次类推,这就叫做原型链。

原型链是对象的有限链,用它来实现继承和分享属性。

考虑一下,当我们有两个对象,他们只有很小的部分不同,其他的都相同。很明显,对于一个好的系统设计,我们自然希望能重用相似的功能/代码,

而不用去重复这段功能/代码在每个单一的对象。在基于类的系统里,这段重复代码利用称做类继承。把类似的功能集成到A类,提供类B,C去继承自

类A,让他们各自有附加的不同之处。

ECMAScript语言没有类的概念。然而,代码复用是没有太大的不同(甚至在某些方面,它比类式语言更有扩展性),通过原型链来实现的。

这种继承称为委托继承(更接近于ECMAScript,基于原型继承)。

类似例子里的类A,B,C, 在ECMAScript里你可以创建对象:a,b,和c。这样,a对象存放的是对象b,c相同的部分。对象b,c存放的是他们

各自的属性或方法。

var a = {
    x: 10,
    calculate: function( z ){
        return this.x + this.y + z;
    }
};

var b = {
    y: 20,
    __proto__: a
};

var c = {
    y: 30,
    __proto__:a
}

b.calculate( 30 ); // 60
c.calculate( 40 ); //80

很简单,不是吗?我们看到对象b,c可以访问到 calculate 方法,它是定义在a对象里的。这就是通过原型两来实现的。

这个简单规则: 如果一个属性或方法在它自己的对象里没有找到(比如:该对象自身没有这个属性),这样就会在原型链里

试图去访问这个属性或方法。如果在原型对象里没有找的话,那么会在该原型对象的原型对象里去寻找,依次类推,到整个原型链(

类似于类链)。第一次找到就会返回。这样,找到的属性称为继承属性。如果向上找完整个原型链,都没有找到该属性的话,那么就

返回undefined。

注意到 this 的值是在继承的方法里被设置为原始对象,而不是原型对象,在该对象找到这个方法的。比如:例子里的 this.y 是来自

b和c,而不是来自a的。然而,this.x 是通过原型链机制取自a的。

如果原型属性没有明确指定了对象,那么默认的__proto__的值就是Object.prototype. Object的Object.prototype也有一个__proto__,这个是链的终端,

并被设置为空。

下面的图片说明了the继承层次关于我们的对象a,b,c:

时间: 2024-08-01 10:46:10

javascript之对象,原型链的相关文章

javascript 创建对象及对象原型链属性介绍

我们知道javascript里定义一个普通对象的方法,如: let obj = {}; obj.num = 1; obj.string = 'string'; obj.func = function(){alert('func')}; obj.arr = ['x','y']; console.log(obj.num); //1 console.log(obj.string); // "string" console.log(obj.func); //function(){alert('

图解JavaScript中的原型链

转自:http://www.jianshu.com/p/a81692ad5b5d typeof obj 和 obj instanceof Type 在JavaScript中,我们经常用typeof obj和obj instanceof Type来识别类型,那么两者的区别在哪?先来看两段代码 <!--typeof obj的方式判断--> <script>    var str = "toby";    console.log(typeof str);// stri

理解JavaScript:继承与原型链

本文翻译自https://wildlyinaccurate.com/understanding-javascript-inheritance-and-the-prototype-chain Javascript里的一切几乎都是对象,每一个对象都有一个链接到其他对象的内部属性,我们称之为prototype (原型).原型对象自己也有自己的原型对象,以此类推,这时候原型链就出来了.如果你追踪原型链,你最终会到达原型为 null的内核 Object,这是原型链的终点. 原型链的作用是什么呢?当我们访问

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

一.序言 ??和其他面向对象的语言(如Java)不同,Javascript语言对类的实现和继承的实现没有标准的定义,而是将这些交给了程序员,让程序员更加灵活地(当然刚开始也更加头疼)去定义类,实现继承.(以下不讨论ES6中利用class.extends关键字来实现类和继承:实质上,ES6中的class.extends关键字是利用语法糖实现的) Javascript灵活到甚至可以实现接口的封装(类似Java中的Interface和implements). 二.类的实现 1.我对类的理解 ??首先,

[js高手之路]一步步图解javascript的原型(prototype)对象,原型链

我们接着上文继续,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) {             this.userName = uName;         }         CreateObj.prototype.showUserName = function(){             return this.userName;         }         va

JavaScript核心-继承-原型链

继承是面向对象的编程的一大特性,很多OO语言都支持两种继承方式:接口继承和实现继承.在ECMAScript中,由于函数没有签名,所以无法实现接口继承,只有实现继承. 实现继承主要是依靠原型链来实现的. 简单回顾一下构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而对象的每个实例都有一个指向原型对象的内部指针. 再回顾一下原型对象的用途:用途是包含可以由特定类型的所有实例共享的属性和方法. 原型对象也是一个简单的对象,如果我们让一个原型对象等于另一个

javaScript里的原型链

原型对象也是普通的对象,是对象一个自带隐式的__proto__属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链.原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链. 原型对象中的属性可以被多个实例共享.原型对象存在于构造函数的属性(prototype)中,prototype的值是一个Object类型数据(对象). JavaScript的数据对象有哪些属性值呢,举几个简单的栗子: writable:这个属性的值是否可以改: configurabl

原型,原型对象,原型链,构造函数,继承(一)

前言:javascript中 万物皆对象 , 但是对象是有区别的 分为普通对象(object)和函数对象(function): ①由以下三种形式创建的对象为函数对象: function fun1(){} var fun2 = function(){} var fun3 = new Function(); console.log(typeof fun1);//function console.log(typeof fun2);//function console.log(typeof fun3);

JavaScript继承与原型链

对于那些熟悉基于类的面向对象语言(Java 或者 C++)的开发者来说,JavaScript 的语法是比较怪异的,这是由于 JavaScript 是一门动态语言,而且它没有类的概念( ES6 新增了class 关键字,但只是语法糖,JavaScript 仍旧是基于原型). 涉及到继承这一块,Javascript 只有一种结构,那就是:对象.在 javaScript 中,每个对象都有一个指向它的原型(prototype)对象的内部链接.这个原型对象又有自己的原型,直到某个对象的原型为 null 为

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

Javascript继承通常有三种方式. 第一种:组合式继承: function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function() { console.log(this.name); }; function SubType(name, age) { //通过ca