JS继承--原型链继承和类式继承

时间:2024-04-23 09:14:45 

什么是继承啊?答:别人白给你的过程就叫继承。

为什么要用继承呢?答:捡现成的呗。

好吧,既然大家都想捡现成的,那就要学会怎么继承!

在了解之前,你需要先了解构造函数对象原型链等概念......

JS里常用的两种继承方式

  1. 原型链继承(对象间的继承)类式继承(构造函数间的继承)

原型链继承


//要继承的对象
var parent={
name : "baba"
say : function(){
alert("I am baba");
}
}

//新对象
var child = proInherit(parent);

//测试
alert(child.name); //"baba"
child.say(); //"I am baba"

利用proInherit(obj)方法,传入对象,就能实现对象的属性及方法的继承,这个方法不是内置方法,所以要自己定义,非常简单:


function proInherit(obj){
function F () {}
F.prototype = obj;
return new F();
}

其中F()为一个临时的空的构造函数,然后将F()的原型设置为父对象,但是同时它又通过受益于_proto_链接而具有其父亲对象的全部功能。

链式图解:

         JS继承--原型链继承和类式继承

 

类式继承:


//父类构造函数
function Parent() {
this.name = "baba";
}
//父类原型方法
Parent.prototype.getName = function () {
return this.name;
}

//子类构造函数
function Child() {
this.name = "cc";
}

//类式继承
classInherit(Parent, Child);

//实例
var child = new Child();
alert(child.getName()) //“baba”

下面我们来看看这个继承的关键方法:classInherit(Parent,Child)


var classInherit = (function () {
var F = function () { }
return function (P, C) {
F.prototype = P.prototype;
C.prototype = new F();
C.prototype.constructor = C;
}
}());

 分析一下这个方法:

  1. 首先创建一个空的构造函数F(),用其实例的_proto_属性来构建父类与子类的原型链。起到一个代理的作用,目的是为了防止C.prototype = P.prototype,这样会在子类实例化后修改属性或方法时候,连同父类一起修改。整体采用即时函数并且在闭包中存储F(),防止多次继承时候创建大量的空的构造函数,从而减少消耗内存。最后一行的意思是,由于原型链的关系,C的实例对象的constructor会指向P,所以重新设置。

链式图解:

            JS继承--原型链继承和类式继承

这种方式虽然在实例的时候继承了原型方法,但是父类的属性无法继承,下面介绍一种复制继承,算是对类式继承的补充。

复制继承:


//复制继承
function copyInherit(p, c) {
var i,
toStr = Object.prototype.toString,
astr = "[object Array]";
c = c || {};
for (i in p) {
if (p.hasOwnProperty(i)) {
if (typeof p[i] === "object") {
c[i] = toStr.call(p[i]) == astr ? [] : {};
c[i] = copy(p[i], c[i]);
}
else {
c[i] = p[i];
}
}
}
return c;
}

//重写Parent
function Parent() {
this.name = "pp";
this.obj= {a:1,b:2};
this.arr= [1, 2]
}
//实例
var child = new Child();
var parent = new Parent();
copyInherit(parent, child);
alert(child.name) //"baba"
alert(child.arr) //1,2
alert(child.obj.a) //1

 分析下copyInherit(p,c)

当一个值赋予一个变量时候,分为传值和传引用两种方式,当你父对象内属性包含数组类型或是对象类型时候,  c[i] = toStr.call(p[i]) == astr ? [] : {};这一句会避免修改子对象属性而引起的父对象属性被篡改。

总结:

类式继承比较普遍,因为大家都比较熟悉这种构造函数方式,但是内存占用比较大。而原型式继承,占用内存比较小,但是包含数组,或者对象类型的克隆比较麻烦。复制继承简单,而且应用广泛。

 

标签:JS继承,原型链继承,类式继承
0
投稿

猜你喜欢

  • 绿色版 mysql 安装配置

    2024-01-20 23:05:01
  • python的help函数如何使用

    2023-12-21 10:46:48
  • 中秋将至利用python画一些月饼从天而降不用买了

    2023-08-17 13:08:23
  • python清除字符串里非数字字符的方法

    2023-08-12 02:47:32
  • 设计可以量化吗?

    2009-06-12 12:12:00
  • php下载文件源代码(强制任意文件格式下载)

    2023-10-10 07:53:20
  • python标准库random模块处理随机数

    2023-11-23 16:22:49
  • django开发post接口简单案例,获取参数值的方法

    2022-10-20 06:45:00
  • python基础之类型转换函数

    2021-06-25 02:43:27
  • 关于Python的一些学习总结

    2022-01-10 11:23:41
  • Ubuntu安装Mysql启用远程连接的详细图文教程

    2024-01-25 16:57:31
  • 拓扑排序Python实现的过程

    2021-10-23 13:57:44
  • 禁止背景图在网页中平铺

    2011-04-29 14:10:00
  • TypeScript入门-接口

    2024-06-07 15:55:26
  • 关于MySQL 大批量插入时如何过滤掉重复数据

    2024-01-17 10:42:51
  • python 字典的概念叙述和使用方法

    2021-11-08 00:42:06
  • Django小白教程之Django用户注册与登录

    2022-01-14 10:30:06
  • 详解使用vue脚手架工具搭建vue-webpack项目

    2024-05-21 10:29:19
  • Python 异步之在 Asyncio中如何运行阻塞任务详解

    2023-06-10 04:30:41
  • 新手如何快速入门Python(菜鸟必看篇)

    2021-01-27 01:24:35
  • asp之家 网络编程 m.aspxhome.com