重温Javascript(三)

继承



  1.原型链继承

  基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含着一个指向另一个构造函数的指针。层层递进,构成了实例与原型的链条。

function SuperType(){
    this.property = true;
}

SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}

//继承了SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
    return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true

  完整的原型链继承示意图

  

  原型链继承的问题

  仍然是原型中引用类型的问题

function SuperType(){
    this.colors = ["red", "blue", "green"];
}

function SubType(){
}

//继承了SuperType
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green,black"

  

  2.借用构造函数 

function SuperType(){
    this.colors = ["red", "blue", "green"];
}

function SubType(){
    //继承了SuperType
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"

var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

  

function SuperType(name){
    this.name = name;
}

function SubType(){
    //继承了SuperType,同时还传递了参数
    SuperType.call(this, "Nicholas");
    //实例属性
    this.age = 29;
}

var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29

  还是和创建对象的构造函数模式一样的问题,无法公用prototype的方法

  3.组合继承

  将原型链和借用构造函数的技术组合到一起。通过原型链实现原型属性和方法的继承,通过借用构造函数实现对实例属性的继承。通过在原型上定义方法实现了函数复用,又能够保证每个实例都有自己的属性

function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){
    //继承属性
    SuperType.call(this, name);
    this.age = age;
}

//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"

instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29

var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

  

  组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数,一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。子类型最终会包含超类型对象的全部实例属性,在调用子类型构造函数时如果有需要得重写这些属性

  4.组合寄生式继承  

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}
function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype); //创建对象
    prototype.constructor = subType; //增强对象
    subType.prototype = prototype; //指定对象
}
function SuperType(name){
    this.name = name;
    this.colors = ["red", "blue", "green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name, age){
    SuperType.call(this, name);
    this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
    alert(this.age);
};

  对于SubType的原型也不会出现SuperType的实例属性

引用:

《JavaScript高级程序设计中文版》

时间: 2024-10-11 23:23:10

重温Javascript(三)的相关文章

【JavaScript】重温Javascript继承机制

上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网络浏览器——Navigator0.9版诞生在网景公司(Netscape),极为轰动.但是,Navigator0.9只能用来浏览,不

重温 javascript (1) - javscript是什么

<重温javascript>这是一些列 javascript 的学习笔记,部分内容摘自书本或者网络,我这里只是基于自己的理解进行了梳理整理. 一个完整的 javscript 实现是由以下3部分组成的 : 核心 ECMAScript 文档对象模型 DOM 浏览器对象模型 BOM ECMAScript ECMAScript 并不与任何具体浏览器绑定,实际上,它没有提到用于任何用户输入输出的方法. ECMAScript 可以为不同种类的宿主环境提供核心的脚本编程能力,因此核心的脚本语言是与任何特定的

数据结构与算法JavaScript (三) 链表

数据结构与算法JavaScript (三) 链表 我们可以看到在javascript概念中的队列与栈都是一种特殊的线性表的结构,也是一种比较简单的基于数组的顺序存储结构.由于 javascript的解释器针对数组都做了直接的优化,不会存在在很多编程语言中数组固定长度的问题(当数组填满后再添加就比较困难了,包括添加删除, 都是需要把数组中所有的元素全部都变换位置的,javascript的的数组确实直接给优化好了,如 push,pop,shift,unshift,split方法等等…) 线性表的顺序

javascript 三种数组复制方法的性能对比

javascript 三种数组复制方法的性能对比,对于webkit, 使用concat; 其他浏览器, 使用slice. 一. 三种数组复制方法 1. by slice var arr = [1, 2, 3], copyArr; copyArr = arr.slice(); 2. by concat var arr = [1, 2, 3], copyArr; copyArr = arr.concat(); 3. by loop var arr = [1, 2, 3], copyArr = [];

JavaScript 三种创建对象的方法

JavaScript中对象的创建有以下几种方式: (1)使用内置对象 (2)使用JSON符号 (3)自定义对象构造 一.使用内置对象 JavaScript可用的内置对象可分为两种: 1,JavaScript语言原生对象(语言级对象),如String.Object.Function等: 2,JavaScript运行期的宿主对象(环境宿主级对象),如window.document.body等. 我们所说的使用内置对象,是指通过JavaScript语言原生对象的构造方法,实例化出一个新的对象.如: 代

从零开始学JavaScript三(变量)

一.变量 ECMAscript变量是松散型变量,所谓松散型变量,就是变量名称可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符. 定义变量时要使用var操作符 如: var message; /*定义一个名为message的变量,该变量可以用来保存任何值,未初始化的变*量会保存一个特殊的值-undefined */ 二.局部变量 可以声明变量里同时初始化 function test(){ var message='hello'; //定义局部message变量,并初始值为hello a

重温Javascript继承机制

原文:http://mozilla.com.cn/post/21667/ =========================== 上段时间,团队内部有过好几次给力的分享,这里对西风师傅分享的继承机制稍作整理一下,适当加了些口语化的描述,留作备案. 一.讲个故事吧 澄清在先,Java和Javascript是雷锋和雷峰塔的关系.Javascript原名Mocha,当时还叫做LiveScript,创造者是Brendan Eich,现任Mozilla公司首席技术官. 1994年,历史上第一个比较成熟的网

轻松学习JavaScript三:JavaScript与HTML的结合

HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的 <body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内. 一<script> 标签 如需在HTML页面中插入JavaScript脚本,请使用<script>标签.<script>和</script>会告诉JavaScript在何处开始

(转)轻松学习JavaScript三:JavaScript与HTML的结合

摘自:http://blog.csdn.net/erlian1992 HTML中的JavaScript脚本必须位于<script>与</script>标签之间,JavaScript脚本可被放置在HTML页面的 <body>标签和<head>标签中,这种视情况而定,一般放在<head>标签内. 一<script> 标签 如需在HTML页面中插入JavaScript脚本,请使用<script>标签.<script>