本片讲述js 使用prototype实现继承,从而在继承的过程中凸显原型链。

大多OO语言都支持两种继承方式: 接口继承和实现继承 ,而ECMAScript中无法实现接口继承,ECMAScript只支持实现继承,而且其实现继承主要是依靠 原型链 来实现。下面介绍的常用的六种方式,虽然六种叫法,但是本质上都是基于原型链。

1.原型链

基本思想:利用原型让一个引用类型继承另外一个引用类型的属性和方法。

构造函数,原型,实例之间的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

原型链实现继承例子:

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();

console.log(instance.getSuperValue());//true

2.借用构造函数

基本思想:在子类型构造函数的内部调用超类构造函数,通过使用call()和apply()方法可以在新创建的对象上执行构造函数。

例子:

function SuperType() {
this.colors = ["red","blue","green"];
}
function SubType() {
SuperType.call(this);//继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"

3.组合继承

基本思想:将原型链和借用构造函数的技术组合在一块,从而发挥两者之长的一种继承模式。

例子:

function SuperType(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
console.log(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() {
console.log(this.age);
}
var instance1 = new SubType("EvanChen",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("EvanChen666",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"EvanChen666"
instance2.sayAge();//20

4.原型式继承

基本想法:借助原型可以基于已有的对象创建新对象,同时还不必须因此创建自定义的类型。

原型式继承的思想可用以下函数来说明:

function object(o) {
function F(){}
F.prototype = o;
return new F();
}

例子:
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"
ECMAScript5通过新增Object.create()方法规范化了原型式继承,这个方法接收两个参数:一个用作新对象原型的对象和一个作为新对象定义额外属性的对象。
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

5.寄生式继承

基本思想:创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真正是它做了所有工作一样返回对象。

例子:

function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert("hi");
};
return clone;
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"

6.寄生组合式继承

基本思想:通过借用函数来继承属性,通过原型链的混成形式来继承方法

其基本模型如下所示:

function inheritProperty(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;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}

Javascript的面对对象的理解 【下】(prototype的使用)相关推荐

  1. Javascript的面对对象的理解 【上】(prototype,函数和对象等概念)

    首先先生明一下JavaScript面对对象和Java,c#这种高级语言的面对对象有很较大的不同. JavaScript在面对对象"继承"的时候,可以动态的修改修正.换句话说可以动态 ...

  2. 谈谈我对Javascript中This对象的理解

    this 指针的隐式赋值 this总是指向调用该方法的对象: 在事件中,this指向触发这个事件的对象,特殊的是,IE中的attachEvent中的this总是指向全局对象Window: 显示操纵 t ...

  3. 我对javascript对象的理解

    前言 JavaScript这门语言除了基本类型都是对象,可以说JavaScript核心就是对象,因此理解JavaScript对象及其种种特性至关重要,这是内功.本文介绍了我对es5对象,原型, 原型链 ...

  4. 深入理解javascript原型和闭包(3)——prototype原型

    既typeof之后的另一位老朋友! prototype也是我们的老朋友,即使不了解的人,也应该都听过它的大名.如果它还是您的新朋友,我估计您也是javascript的新朋友. 在咱们的第一节(深入理解 ...

  5. JavaScript -- 对象与原型链 [[Prototype]]

    一.第三章:对象 1.属性描述符(数据描述符) 可以使用 Object.getOwnPropertyDescriptor( myObject, "a" ); 获取myObject对 ...

  6. python中对象的特性_python中类与对象之继承,python类和对象理解,面对对象的三大特性之...

    python中类与对象之继承,python类和对象理解,面对对象的三大特性之 面对对象的三大特性之继承 1.什么是继承? 在程序中,继承指的是class与class之间的关系 继承是一种关系,必须存在 ...

  7. 检查值是否是JavaScript中的对象

    如何检查值是否是JavaScript中的Object? #1楼 尝试这个 if (objectName instanceof Object == false) {alert('Not an objec ...

  8. Javascript中的对象查找【转】

    编辑点评:本文作者为大家介绍Javascript中的对象查找一些问题,希望有所帮助. 近期群里常有人提一些简单的问题,比如发一段代码乱七八糟的代码,然后说里面某个变量是什么,比如这里就有个很好的例子: ...

  9. javascript学习之对象基础

    2019独角兽企业重金招聘Python工程师标准>>> javascript学习之对象基础 面向对象语言 面向对象语言需要向开发者提供四种基本能力 封装:把相关信息(数据和方法)存储 ...

最新文章

  1. js 多维数组长度_C++申请与释放动态数组1(学习笔记:第6章 16)
  2. 不插即用!配备微信网页授权模块的CodeIgniter应用脚手架
  3. C++之肥大的界面之感想
  4. SRS流媒体服务器搭建+ffmpeg推流VLC取流观看
  5. Java BigInteger类| and()方法与示例
  6. 教大家抖音怎么开通直播功能
  7. 微服务架构实战:Swagger规范RESTful API
  8. OAuth: How and Why?
  9. 计算机教室联想系统管理员密码,联想电脑EDU开放模式管理员密码忘记了怎么办...
  10. 使用邻接矩阵实现商品SKU表单联动
  11. 浙江大学三位一体招生?
  12. 【2022年第十周周总结】拖延症啊。。。。算法题啊。。。。
  13. What Makes a Good Teacher
  14. (转载)适合大学生旅游时住的各地旅馆
  15. EndnoteX9简介及基本教程使用说明
  16. 微软服务器无法删除不了,[图]Edge无法卸载 引发诸多用户强烈不满
  17. 关于打麻将的高大上语言艺术
  18. 23230118英语学习
  19. MT6755 datasheet资料,MT6755芯片处理器参数
  20. 被曝欠薪又放长假,600亿科技巨头爆雷了

热门文章

  1. sbt安装、配置、運行(scala sbt helloworld)
  2. M2Crypto/__m2crypto.so: undefined symbol: SSLv3_method
  3. c# mysql dbhelp,C#winfrom最简DBHelp(数据库连接操作)
  4. python封装类连接mysql数据_python操作mysql数据库基本类封装
  5. 机器学习(二十二)——推荐算法中的常用排序算法, Tri-training
  6. 机器学习数据挖掘笔记_15(关于凸优化的一些简单概念)
  7. Extjs09 双击事件
  8. JAVA线程池的分析和使用--笔记
  9. OS X开发:NSProgressIndicator进度指示器控件
  10. C# 结构体 枚举类型