深入理解:JavaScript原型与继承

看过不少书籍,不少文章,对于原型与继承的说明基本上让人不明觉厉,特别是对于习惯了面向对象编程的人来说更难理解,这里我就给大家说说我的理解。

首先JavaScript是一门基于原型编程的语言,它遵守原型编程的基本原则:

  1. 所有的数据都是对象(javascript中除了字符串字面量、数字字面量、true、false、null、undefined之外,其他值都是对象!)
  2. 要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它
  3. 对象会记住它的原型
  4. 如果对象无法响应某个请求,它会把该请求委托给它自己的原型

这么说来,JavaScript一定有一个根对象,所有的对象的最终原型都将是它,它就是Object.prototypeObject.prototype也是一个对象,它是一个空的对象。(记住一点:所有的原型都是对象,但不是函数,虽然函数也是对象,Object对象其实就是一个函数)

以下代码创建空对象:

var obj1 = new Object();
var obj2 = {};
Object.getPrototypeOf(obj1) === Object.prototype; //true
Object.getPrototypeOf(obj2) === Object.prototype; //true

我们再来看下以下代码:

function Book(name){
this.name = name;
}
Book.prototype.getName = function(){
return this.name;
}
Book.num = 5;
var book1 = new Book('javascript权威指南');
book1.getName(); //javascript权威指南
Object.getPrototypeOf(book1) === Book.prototype; //true

我们通常说,使用了new Book()来创建了Book的实例book1,但是JavaScript并没有类的概念,这里的Book本质上只是一个函数而已,如果用new则把它当着构造函数对待,那么var book1 = new Book('javascript权威指南')是怎么个执行过程呢?在这之前,我们来先看下Function与Object的关系

这里有张图:

Function与Object的关系

console.log(Function); //[Function: Function]
console.log(Function.constructor); //[Function: Function]
console.log(Function.__proto__); //[Function]
console.log(Function.prototype); //[Function]
console.log(Function.constructor.prototype); //[Function] console.log(Object.__proto__); //[Function]
console.log(Object.prototype); //{}
console.log(Object.constructor); //[Function: Function]
console.log(Object.constructor.prototype); //[Function]

在JavaScript中:Function和Object就像是女娲和伏羲,Object提供种子(Object.prototype),Function负责繁衍。Object是由Object.prototype提供的种子经过Function打造出来的。Object.prototype会被一直继承下去,并一代一代增强。

  1. 每一个函数都有一个原型对象(prototype)和隐藏的__proto__属性,函数的__proto__属性指向Function.prototype,而原型对象(prototype)是一个对象,符合以下第2点(也有构造函数constructor和隐藏的__proto__属性);
  2. 每一个非函数对象(实例对象)都有一个构造函数(constructor)和隐藏的__proto__属性,constructor自然指的是它的构造函数,而__proto__指向的是它的构造函数的原型对象prototype
  3. 通过__proto__属性,每个对象和函数都会记住它的原型,这样就形成了原型链;
console.log(Book); //{ [Function: Book] num: 5 }
console.log(Book.__proto__); //[Function]
console.log(Book.prototype.__proto__); //{} 等于Object.prototype
console.log(Book.prototype); //Book { getName: [Function] }
console.log(Book.constructor); //[Function: Function]
console.log(Book.prototype.constructor); //{ [Function: Book] num: 5 }
console.log(Book.constructor.prototype); //[Function]
console.log(Book.__proto__.__proto__); //{} 等于Object.prototype

每一个函数都是通过Function构造出来的,函数的原型属性__proto__指向Function.prototype,而函数的原型对象prototype是代表着自身的函数对象,它的__proto__属性指向Object.prototype,它的constructor属性默认指向它自己构造函数(也可改为别的函数,如:Book.prototype.constructor = Person;)。

console.log(book1); //Book { name: 'javascript权威指南' }
console.log(book1.__proto__); //Book { getName: [Function] }
console.log(book1.prototype); //undefined
console.log(book1.constructor); //{ [Function: Book] num: 5 }
console.log(book1.constructor.prototype); //Book { getName: [Function] }

所以,我们通常说‘一个对象的原型’其实是不准确的,应该是‘一个对象的构造器的原型’,且对象是把它无法响应的请求委托给它的构造器的原型顺着原型链往上传递的。

现在来讲解一下var book1 = new Book('javascript权威指南')的执行过程,是这样:new先从Object.prototype克隆一个空对象,先将空对象的构造函数指定为Book,然后将空对象的__proto__指向它的构造函数的原型Book.prototype,之后通过Book构造函数对这个空对象进行赋值操作,并将这个对象返回给变量book1。

我们再看如下代码:

var obj = {name: 'Sufu'};
var Person = function(){};
Person.prototype = obj;
var a = new Person();
console.log(a.name); //Sufu

这段是这样执行的:

  1. 首先尝试查找对象a的name属性,找不到,执行第2步
  2. 将查找name属性的这个请求委托给a的构造器的原型,a.__proto__记录的是Person.prototype,Person.prototype为对象obj
  3. 在对象obj中查找name,找到并返回它的值给a,假如还找不到,它就通过obj.__proto__找到Object.prototype,找不到就返回undefined,因为Object.prototype的原型不存在了,为null

好了,就介绍到这里了,以上是个人的理解,有不对的地方欢迎指出!

参考文献:《javascript权威指南》

深入理解:JavaScript原型与继承的更多相关文章

  1. 【前端知识体系-JS相关】深入理解JavaScript原型(继承)和原型链

    1. Javascript继承 1.1 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C' ...

  2. 深入理解javascript原型和闭包(6)——继承

    为何用“继承”为标题,而不用“原型链”? 原型链如果解释清楚了很容易理解,不会与常用的java/C#产生混淆.而“继承”确实常用面向对象语言中最基本的概念,但是java中的继承与javascript中 ...

  3. 彻底理解Javascript原型继承

    彻底理解Javascript原型继承 之前写过一篇Javascript继承主题的文章,这篇文章作为一篇读书笔记,分析的不够深入. 本文试图进一步思考,争取彻底理解Javascript继承原理 实例成员 ...

  4. 深入理解javascript原型和闭包 (转)

    该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分--原型和闭包,当然,肯定少不了原型链和作用域链.帮 ...

  5. 深入理解javascript原型和闭包系列

    从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...

  6. 深入理解javascript原型和闭包(5)——instanceof

    又介绍一个老朋友——instanceof. 对于值类型,你可以通过typeof判断,string/number/boolean都很清楚,但是typeof在判断到引用类型的时候,返回值只有object/ ...

  7. 深入理解javascript原型和闭包(7)——原型的灵活性

    在Java和C#中,你可以简单的理解class是一个模子,对象就是被这个模子压出来的一批一批月饼(中秋节刚过完).压个啥样,就得是个啥样,不能随便动,动一动就坏了. 而在javascript中,就没有 ...

  8. 深入理解javascript原型和闭包(完结)

    原文链接:http://www.cnblogs.com/wangfupeng1988/p/3977924.html 说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascr ...

  9. 深入理解javascript原型和闭包

    目录: 深入理解javascript原型和闭包(1)——一切都是对象 深入理解javascript原型和闭包(2)——函数和对象的关系 深入理解javascript原型和闭包(3)——prototyp ...

随机推荐

  1. 有关try..catch..finally处理异常的总结

    //看一下下面的程序,你能正确的写出不同的testEx2()方法时,程序的最终打印出来的数据吗....先不要看下面的答案 public class ExceptionTest { public Exc ...

  2. nodejs支持ssi实现include shtml页面

    express 对于include的代码默认不处理,直接输出,没办法执行include的内容,但可以通过Nginx实现. 1. 配置nginx设置开启ssi模式. server { … ssi on; ...

  3. CHARFORMAT2 structure

    CHARFORMAT2 structure 包含在丰富的编辑控件中的字符格式设置的信息.charformat2是微软丰富的编辑CHARFORMAT结构2扩展.微软丰富的编辑2允许您使用结构与em_ge ...

  4. 实时数据显示--SignalR实例演示

    近段时间,有实现一个看板的功能,就是用户更新信息时,即是对数据库的数据进行插入,更新,或是删除时,在墙上的屏幕的数据不需要人为去刷新,用户就能看到更新后的数据. 实现此功能,Insus.NET使用Si ...

  5. javascript学习笔记1-document.write

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  6. 项目中的web api知识总结

    最近在做公司的项目,自己负责webapi的框架的搭建与开发,最近很忙,一直没时间对工作中遇到的知识点缺少个总结,现总结一下,对自己是个提升,如果个人的小点点小总结能对博友有帮助那也是善莫大焉. (1) ...

  7. C++: read access data using ADOX.DLL and System::Data::OleDb

    #pragma once #include "Form2.h" namespace cdemo { using namespace System; using namespace ...

  8. 鼠标滑动加载div

  9. Java集合框架之List接口

    在上一篇Java集合框架之Collection接口中我们知道List接口是Collection接口的子接口,List接口对Collection进行了简单的扩充,List接口中的元素的特点为有序,可重复 ...

  10. Scalaz(34)- Free :算法-Interpretation

    我们说过自由数据结构(free structures)是表达数据类型的最简单结构.List[A]是个数据结构,它是生成A类型Monoid的最简单结构,因为我们可以用List的状态cons和Nil来分别 ...