Javascript中的继承与原型链理解

在编程语言中,对象并不像真实世界中那样随处可见,随口可以指代。通常我们只有少数的原生对象,剩下的,需要我们自己去创建。在Java语言中,创建一只会“咯咯咯”叫的鸡时,我们是这么做的:

public class Chicken{
 
  public void makeSound(){
 
  System.out.println("咯咯咯");
 
  }
} 
Chicken littleChicken = new Chicken();

先定义一个Chicken类,在Chicken中对其诸多特质进行一番描述,然后根据这些描述new一个littleChicken出来。

这是在以类为中心的编程语言中实现产生对象的方法,就像是先制造模具,然后根据模具浇铸模件。还有一种思想,是将已经存在的最原始最基本的对象复制一遍,然后在新对象身上修修补补,这个原始对象,就是原型,这种思想,就是原型编程的思想,其代表语言,便是Javascript。

比如:

var Chicken = function(){
    this.sound = "咯咯咯";
};
Chicken.prototype = {
    bark:function(){alert(this.sound)}
};
var littleChicken = new Chicken();

是不是和刚才定义类的方法看起来非常相似,同样是先定义类再根据类new一个对象。实际上,其原理是很不一样的。从原型讲起。

在Javascript中,一切对象都继承自Object.prototype,看起来Object确实比较像一个祖先级的东西,那么为什么不是继承自Object而是Object.prototype?因为Object其实是一个构造器,构造器,是一个类似于Java中类的存在。它像一个高科技机器,用来完成复制原型的动作。而高科技机器里的模版呢?它早已被放入机器,它就是机器的原型,也就是Object.prototype。当我们在说Object的时候,实际是在说那个高科技机器,Object.prototype,才是代指机器中的原型。

上面代码中的Chicken就是一个自定义的构造器。当我们用这个构造器new一个对象的时候,实际上是使用这个构造器克隆放在里面的模版,也就是prototype。构造器实际上就是一个普通的函数,这是在其中我们用this来进行了一些配置。this在这里指代的是即将要创建的对象,而prototype就是放在机器中的模版。当我们用Chicken这个构造器new 一个新的对象,就等于通过复制Chicken.prototype来创建一个新对象,然后给这个新对象增加一个sound属性,给其赋值“咯咯咯”。

console.log(Object.getPrototypeOf(littleChicken));//Object {} bark: () __proto__: Object

Object.getPrototypeOf是获得对象原型的函数,输出代表一个有着bark函数的对象,是不是和Chicken.prototype一样呢?下面的__proto__: Object代表这个原型的原型,也就是Object.prototype,第一个Object代表一个普通对象,而第二个Object代表构造函数,如下:

console.log(Object.getPrototypeOf(Object.getPrototypeOf(littleChicken)););//Object{}

简单地说:

1.所有的对象都是由另一个对象复制而来,被复制的那个对象就被称为新对象的“原型”
2.完成复制动作的工具,叫做构造器。构造器是一个普通的函数。通过给构造器定义prototype属性,来配置“原型”
3.通过调用Object.getPrototypeOf()或者object.__proto__可以得到此对象的原型,根据 ECMAScript 标准,someObject.[[Prototype]] 符号是用于指派 someObject 的原型
4.所有的原型都继承自Object.prototype
5.Object.prototype继承自null,也就是说,原型链的尽头,是null

JavaScript:我对原型链的理解

原型链一直是个很抽象的概念,看不到,摸不着.随着最近对JavaScript进一步的学习,我对原型链有了一点理解,下面讲出来.

基础知识

在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链.

访问一个对象的原型可以使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__属性.

原型链的作用是用来实现继承,比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的.

    var arr = [];
arr.map === Array.prototype.map    //arr.map是从arr.__proto__上继承下来的,arr.__proto__也就是Array.prototype

图形化原型链

虽然我们都说原型链,但实际上,在不考虑网页中frame的情况,js引擎在执行期间的某一时刻,所有存在的对象组成的是一棵原型树.默认情况下,只有一棵树.根节点可以说是Object.prototype,也可以说是null.

但我们可以再建立一棵原型树,通过使用Object.create方法

    var foo = Object.create(null);        //foo是一个对象,但它是游离的,不属于已有的那棵原型树
var bar = Object.create(foo);         //bar的原型是foo
var baz = Object.create(foo);         //baz的原型是foo

这样我们有了第二棵原型树

遍历原型链

我们没有办法遍历到所有以某个对象为原型的对象,但我们可以向上遍历,获取到一个对象所有的上层原型,这个原型链必定是线性的,尽头是null.

    function getPrototypeChain(object) {
    var protoChain = [];
    while (object = object.__proto__) {
        protoChain.push(object);
    }
    protoChain.push(null);
    return protoChain;
}

试验一下,不同的环境实现不同,显示形式也不同.下面是在chrome控制台中的显示.

    >getPrototypeChain(new String(""))
[String, Object, null]                     //依次是String.prototype,Object.prototype,null
 
>getPrototypeChain(function(){})
[function Empty() {}, Object, null]        //依次是Function.prototype,Object.prototype,null

内置类型的对象的原型链并不长,下面试试宿主对象.

    >getPrototypeChain(document.createElement("div"))
[HTMLDivElement, HTMLElement, Element, Node, Object, null]

这个就长多了.

超长原型链

可以看出来,我们平时使用的对象并没有很长的原型链.但可以自己构造一个.

function Foo() {}

for (var i = 0; i < 100; i++) {
    Foo.prototype["foo" + i] = i;
    Foo.prototype = new Foo;
}
console.dir(getPrototypeChain(new Foo));

最后的这个new Foo有多少个上层原型呢?

时间: 2024-08-01 14:14:34

Javascript中的继承与原型链理解的相关文章

JAVASCRIPT中的作用域和原型链,应该算是难点了,要好好多学学,练练

今天初六,要上班啦... JAVASCRIPT,看来是丢不了了.. http://www.dengdeng90.com/wordpress/?p=241 http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html http://www.cnblogs.com/wangfupeng1988/p/3977924.html <script> console.log(Object.getOwnPropertyNames(Object.pro

JavaScript 指南 - 继承与原型链

MDN  Web技术文档  JavaScript  JavaScript 指南  继承与原型链 继承与原型链 4 名贡献者:        在本文章中 基于原型链的继承 继承属性 继承方法 使用不同的方法来创建对象和生成原型链 使用普通语法创建对象 使用构造方法创建对象 使用Object.create创建对象 性能 不好的实践:扩展原生对象的原型 结论 对于那些熟悉基于类的面向对象语言(java或者c++)的开发者来说,JavaScript的语法是比较怪异的, 这是由于javascript是一门

Javascript:继承和原型链

JavaScript:继承和原型链(译) 原文:Inheritance and the prototype chain 译者:youngsterxyf 对于具备基于类的编程语言(如Java或C++)经验的程序员来说,JavaScript有点混乱,因为它是一种动态语言,并且不提供class的实现(虽然关键字class是保留的,不可用作变量名). 说到继承,JavaScript只有一种结构:对象.每个对象都有一个内部链接指向另一个对象,这个对象称为原型 (prototype).那个原型对象也有自己的

深入理解JS继承和原型链的问题_javascript技巧

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

JavaScript中的继承方式详解

 这篇文章主要介绍了JavaScript中的继承方式详解,本文讲解了js继承的概念.原型式继承与类式继承.原型链继承.类式继承.组合继承.原型式继承等内容,需要的朋友可以参考下     js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 在面向对象的语言中,我们使用类来

javascript中的继承实现

原文:javascript中的继承实现 javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的继承方式,继承与被继承的双方都是"类",代码如下: 首先定义一个父类(或超类): 1 function Person(name){ 2 this.name=name; 3 } 4 5 Person.prot

Javascript中的对象和原型(二)_javascript技巧

在上篇文章中JavaScript中的对象和原型(一)提到了JavaScript中对象的创建的一些基本操作,接下来讨论下继续讨论. 一 工厂模式 我们知道,要创建一个对象我们可以用如下代码: var user = new Object(); //使用new运算符创建一个对象 user.name = '念在三角湖畔'; //给对象添加属性 user.age = 22; user.address = '湖北武汉'; alert(user.name + " " +user.age);//返回

JavaScript中的对象和原型(一)_javascript技巧

面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首先就要了解Javascript中的对象和原型.这篇文章中主要学习一下Javascript中的对象. 一 关于对象 对象其实就是一种引用类型.而对象的值就是引用类型的实例.在JavaScript 中引用类型是一种数据结构,将数据和功能组织在一起.它也常被称做为类,但JavaScript 中却没有类的概

js对象继承之原型链继承实例_javascript技巧

本文实例讲述了js对象继承之原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: <script type="text/javascript"> //定义猫的对象 var kitty  = {color:'yellow',bark:function(){alert('喵喵');},climb:function(){alert('我会爬树')}}; //老虎对象的构造函数 function tiger(){  this.color = "ye