Javascript高级程序设计——面向对象之实现继承
原型链:
构造函数中都有一个prototype属性指针,这个指针指向原型对象,而创建的实例也有指向这个原型对象的指针__proto__。当实例查找方法时先在实例上找,找不到再通过__proto__到原型对象上查找。如果原型对象是另一个类型的实例,那么原型对象包含一个指向另一个原型对象的指针、另一个原型对象中也包含指向另一个构造函数的指针。
原型连继承
function superValue(){
this.superValue = "superValue";
} superValue.prototype.getSuperValue(){
return this.superValue;
} function subValue(){
this.subValue = "subValue";
} subValue.prototype = new superValue();
//原型被superValue实例替换,实现继承superValue的属性和方法。没有了constructor subValue.prototype.getSubValue = function(){
return this.subValue;
} var instance = new subValue(); instance instanceof Object
//true,所以的引用类型都继承Object,也是通过原型链继承的。
instance instanceof superValue; //true
instance instanceof subValue; //true //只要原型链出现过的构造函数,结果就返回true。
所以的函数类型都是Object的实例,所以instance instanceof Object 返回true
问题:
通过原型继承时会共享所有引用类型的属性
不能向超类的构造函数传递参数。
借用构造函数:
又名伪造对象。在子类型的函数的内部调用超类的构造函数
function superValue(){
this.colors = ["yellow", "green", "red"];
} function subValue(){
//继承了superValue
superValue.call(this);
} var instance1 = new subValue();
instance1.color.push("new");
instance1.color //["yellow", "green", "red", "new"] var instance1 = new subValue();
instance1.color //["yellow", "green", "red"] 不共享属性问题:构造函数的内部调用父类的构造函数,无法实现函数复用
组合继承:
利用原型链实现方法的继承,达到函数复用。
利用构造函数实现实例的属性继承,避免了引用实例的共享问题
function superValue(name){
this.name = name;
this.color = ["red", "green"];
} superValue.prototype.sayName = function(){
alert(this.name);
} function subValue(age, name){
superValue.call(this, name); //对构造函数的属性的继承
this.age = age;
} //实现继承superValue
subValue.prototype = new superValue();
//恢复被覆盖的构造函数
subValue.prototype.constructor = subValue;
//定义自己的方法
subValue.prototype.sayAge = function(){
alert(this.age);
} var instance = new subValue(24, "yang");
instance.color.push("black");
instance.color //["red", "green", "black"];
instance.sayName() //yang 继承来的方法
instance.sayAge() //24 自己的方法 var instance2 = new subValue(25, "he");
instance.color //["red", "green"]不共享引用类型。
instance.sayName() //he 继承来的方法
instance.sayAge() //25 自己的方法问题:继承时调用了两次supeValue()一次函数内部,一次实例化原型对象,子类型屏蔽了原型对象上的属性,可以通过寄生组合类型继承解决。
原型继承:
function object(obj){
funciton F(); //声明一个临时的构造函数
F.prototype = obj; //实现原型继承
return new F(); //返回构造函数实例。
} //整个过程是一个浅复制
寄生式继承:
与寄生构造函数和工厂模式类似,即创建一个仅用于封装过程的函数,在内部增强对象。
function object(obj){
var clone = object(obj);
clone.sayName = function(){
alert(haha"");
} return clone;
}
//函数内部增强对象
寄生组合类型继承:
解决组合继承中两次调用superValue()函数。这两次调用superValue()会在原型对象和新对象上创建属性。
function superValue(name){
this.name = name;
this.color = ["red", "green"];
} superValue.prototype.sayName = function(){
alert(this.name);
} function subValue(age, name){
superValue.call(this, name); //调用父类构造函数创建属性name和color。屏蔽原型上的属性name和color
this.age = age;
} //实现继承superValue,在原型上创建属性name和color
subValue.prototype = new superValue(); subValue.prototype.constructor = subValue;
subValue.prototype.sayAge = function(){
alert(this.age);
}解决:通过寄生组合式继承,通过借用构造函数来继承属性,通过原型链混成形式继承方法
方法:不必为了指定子类型的原型而调用超类的构造函数。通过寄生式继承超类原型,指定给子类原型
function inheritPrototype(subType, superType){
var prototype = object(super.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象
}寄生组合继承代码
function superValue(name){
this.name = name;
this.color = ["red", "green"];
} superValue.prototype.sayName = function(){
alert(this.name);
} function subValue(age, name){
superValue.call(this, name); //实现属性的继承
this.age = age;
}
//原型链方法继承
inheritPrototype(subType, superType); subValue.prototype.sayAge = function(){
alert(this.age);
}
Javascript高级程序设计——面向对象之实现继承的更多相关文章
- Javascript高级程序设计——面向对象小结
ECMAScript支持面向对象编程,对象可以在代码执行时创建,具有动态扩展性而非严格意义上的实体. 创建对象方法: 工厂模式:简单的函数创建引用类型 构造函数模式:可以创建自定义引用类型,可以想创建 ...
- 《JavaScript高级程序设计》笔记——关于继承
继承在JavaScript中是一种“奇葩”的存在,因为其本身并没有类(class)的概念(ES5),所以只能用其他方式(原型链.构造函数.对象实例)来模拟继承的行为.既然是模拟,那就应该是想办法实现继 ...
- 2020/06/06 JavaScript高级程序设计 面向对象的程序设计
ECMAScript虽然是一种面向对象的语言,但是他没有类的概念.所以他的对象也与其他语言中的对象有所不同. ECMA-262定义对象:一组没有特定顺序的值. 6.1 理解对象 创建对象的方法: 1. ...
- Javascript高级程序设计——面向对象之创建对象
对象创建方法: 工厂方法 构造函数模式 原型模式 组合构造函数和原型模式 寄生构造函数模式 问题构造函数模式 工厂模式: function Person(name, age){ var obj = n ...
- Javascript高级程序设计——面向对象之理解对象
在面向对象语言中都有类的概念,通过类来创建具有属性和方法的对象.而ECMAScript中没有类的概念,ECMAScript中定义了对象:无需属性的集合,其属性值可以包含基本值.对象.或者函数. 在Ja ...
- JavaScript高级程序设计之寄生组合式继承
在继承中常会出现两个问题: 父类的属性变成了子类的原型 构造器指向混乱 寄生组合式继承解决了这样的问题: 属性继承到属性 原型继承到原型 构造器指向明确 // 父类 var Super = funct ...
- 《JavaScript高级程序设计》读书笔记 ---继承
继承是OO 语言中的一个最为人津津乐道的概念.许多OO 语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.如前所述,由于函数没有签名,在ECMAScrip ...
- 《JavaScript高级程序设计》学习笔记(5)——面向对象编程
欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 本节内容对应<JavaScript高级程序设计>的第六章内容. 1.面向对象(Object ...
- 《Javascript高级程序设计》阅读记录(六):第六章 下
这个系列以往文字地址: <Javascript高级程序设计>阅读记录(一):第二.三章 <Javascript高级程序设计>阅读记录(二):第四章 <Javascript ...
随机推荐
- C#调用c++的dll报错:“尝试读取或写入受保护的内存。这通常指示其他内存已损坏“
一:c++代码内部报错引起.可能是空指针或者其他. 二:需要从c#代码调试进入c++代码.可以吧c++的dll和pdb拷入工程项目的debug目录下面. 三:我发现的错误时在C++内部声明啦全局变量, ...
- 如何在Visual Studio 2013中使用Ribbon For WPF
1.首先需要 下载Ribbon For WPF.目前最新的版本是Microsoft Ribbon for WPF October 2010. 下载 链接: https://www.microsoft. ...
- Gated Recurrent Unit (GRU)公式简介
update gate $z_t$: defines how much of the previous memory to keep around. \[z_t = \sigma ( W^z x_t+ ...
- Nuxt.js logoVue.js 后端渲染开源库 Nuxt.js
Nuxt.js 是一个通过 Vue 用于服务端渲染的简单框架,灵感来自 Next.js. 目前尚处于开发阶段,1.0 版本即将发布 1 分钟视频演示 Nuxt 基于 ES2015,这使得代码有着更愉快 ...
- Mysql和Memcached的连动
Memcached 和 mysqld 的联通 一 概述: what's UDFs ? UDFs是User Defined Functions的缩写,表示Mysql用户自定义的函数,应用程序可以利用这些 ...
- tcpdump抓包命令
本文转自 : http://www.cnblogs.com/ggjucheng/archive/2012/01/14/2322659.html http://www.itshouce.com.cn/l ...
- css3之2D转换
css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...
- break; continue; goto; return在循环中的应用
1. break表示跳出循环,程序指向循环体后的第一条语句: ; ) { ) break; console.writeline("{0}",i++); } console.read ...
- C#中使用代码动态改变配置文件信息
static void Main(string[] args) { XmlDocument xDoc = new XmlDocument(); xDoc.Load("../../App.co ...
- BIOS设置教程
BIOS设置图解教程之AMI篇 BIOS设置图解教程之AMI篇(目前主板上常见的BIOS主要为AMI与AWARD两个系列,如何辨别BIOS品牌系列请移步,本文详细讲解AMI系列的BIOS设置图解教程, ...