码迷,mamicode.com
首页 > Web开发 > 详细

快速理解JS中的继承与原型链

时间:2015-12-06 19:23:26      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

  语言是用来表达的工具。当我们需要代指某个东西的时候,通常称其为一个对象。在编程语言中,对象并不像真实世界中那样随处可见,随口可以指代。通常我们只有少数的原生对象,剩下的,需要我们自己去创建。在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

 (第一次在博客园写博客,水平有限,有不正确或者会误导人的地方欢迎拍砖)     

  ??                                                                                                                                                                                                                                                                                                                                                              

 

快速理解JS中的继承与原型链

标签:

原文地址:http://www.cnblogs.com/leexingxing/p/5022726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!