javascript继承的6种方法

最新推荐文章于 2024-02-23 13:33:07 发布
最新推荐文章于 2024-02-23 13:33:07 发布
阅读量276 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mshkkhhgy/article/details/79476539
版权

1、原型链继承

原型链继承基本思想就是让一个原型对象指向另一个类型的实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
	function SuperType() { 
	 this.property = true
	} 
	SuperType.prototype.getSuperValue = function () { 
	 return this.property 
	} 
	function SubType() { 
	 this.subproperty = false
	} 
	SubType.prototype = new SuperType() 
	SubType.prototype.getSubValue = function () { 
	 return this.subproperty 
	} 
	var instance = new SubType() 
	alert(instance.getSuperValue())
</script>
</head>
<body>
</body>
</html>

2、借用构造函数继承

此方法为了解决原型中包含引用类型值所带来的问题。

这种方法的思想就是在子类构造函数的内部调用父类构造函数，可以借助apply()和call()方法来改变对象的执行上下文

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
	function SuperType() { 
	 this.colors = ['red', 'blue', 'green'] 
	} 
	function SubType() { 
	 // 继承SuperType 
	 SuperType.call(this) 
	} 
	var instance1 = new SubType() 
	var instance2 = new SubType() 
	instance1.colors.push('black') 
	alert(instance1.colors) 
	alert(instance2.colors)
</script>
</head>
<body>
</body>
</html>

3、组合继承(原型+借用构造)

组合继承是将原型链继承和构造函数结合起来，从而发挥二者之长的一种模式。

思路就是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。

这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有它自己的属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
	function SuperType(name) { 
	 this.name = name 
	 this.colors = ['red', 'blue', 'green'] 
	} 
	SuperType.prototype.sayName = function () { 
	alert(this.name) 
	} 
	function SubType(name, job) { 
	 // 继承属性 
	 SuperType.call(this, name) 
	 this.job = job 
	} 
	// 继承方法 
	SubType.prototype = new SuperType() 
	SubType.prototype.constructor = SuperType 
	SubType.prototype.sayJob = function() { 
	 alert(this.job) 
	} 
	var instance1 = new SubType('Jiang', 'student') 
	instance1.colors.push('black') 
	alert(instance1.colors) //["red", "blue", "green", "black"] 
	instance1.sayName() // 'Jiang' 
	instance1.sayJob() // 'student' 
	var instance2 = new SubType('J', 'doctor') 
	alert(instance2.colors) // //["red", "blue", "green"] 
	instance2.sayName() // 'J' 
	instance2.sayJob() // 'doctor'
</script>
</head>
<body>
</body>
</html>
这种模式避免了原型链和构造函数继承的缺陷，融合了他们的优点，是最常用的一种继承模式。

4、原型式继承

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
	function object(o) { 
	 function F() {} 
	 F.prototype = o 
	 return new F() 
	}
	var person = { 
	 name: 'Jiang', 
	 friends: ['Shelby', 'Court'] 
	} 
	var anotherPerson = object(person) 
	alert(anotherPerson.friends)
</script>
</head>
<body>
</body>
</html>

5、寄生式继承

寄生式继承的思路与寄生构造函数和工厂模式类似，即创建一个仅用于封装继承过程的函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
	function createAnother(o) { 
	 var clone = Object.create(o) // 创建一个新对象 
	 clone.sayHi = function() { // 添加方法 
	 alert('hi') 
	 } 
	 return clone // 返回这个对象 
	} 
	var person = { 
	 name: 'Jiang'
	} 
	var anotherPeson = createAnother(person) 
	anotherPeson.sayHi()
</script>
</head>
<body>
</body>
</html>

6、寄生组合式继承

在前面说的组合模式(原型链+构造函数)中，继承的时候需要调用两次父类构造函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
	function SuperType(name) { 
	 this.name = name 
	 this.colors = ['red', 'blue', 'green'] 
	} 
	SuperType.prototype.sayName = function () { 
	 alert(this.name) 
	} 
	function SubType(name, job) { 
	 // 继承属性 
	 SuperType.call(this, name) 
	 this.job = job 
	} 
	// 继承 
	SubType.prototype = Object.create(SuperType.prototype) 
	// 修复constructor 
	SubType.prototype.constructor = SubType 
	var instance = new SubType('Jiang', 'student') 
	instance.sayName()
//ES6新增了一个方法，Object.setPrototypeOf，可以直接创建关联，而且不用手动添加constructor属性。
	// 继承 
	Object.setPrototypeOf(SubType.prototype, SuperType.prototype) 
	alert(SubType.prototype.constructor === SubType)
</script>
</head>
<body>
</body>
</html>
陌上花开-可缓缓归矣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript的几种继承方法介绍
10-22
下面小编就为大家带来一篇javascript的几种继承方法介绍。小编觉得挺不错的。现在分享给大家，给大家一个参考
JavaScript之this的指向
wyh1996wyh的博客
08-04 103
JavaScript之this 的指向在全局环境中的this指向在函数内的this指向在对象方法中的this指向在事件句柄函数中的this指向apply bind call 改变this指向严格模式里面的this指向 今天学了下在JavaScript中this 的简单用法，总结了一下。 在全局环境中的this指向 console.log(this); //window 在全局环境中直接打印出t...
JavaScript的6种继承
最新发布
qq_34506728的博客
02-23 326
JavaScript的6种继承
JavaScript继承的几种模式
dedong5893的博客
11-11 62
原型链 　　让一个类的原型对象指向另一个类的实例 　　 　　问题1：引用类型会被共享，一个实例对象更改了值会在所有的对象中更新 　　问题2：创建子类对象时，不能向超类构造函数中传值 借用构造函数　　 　　 　　可向超类构造函数传值 　　问题：无法复用方法 组合继承 　　使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。 　　　调用两次超...
JavaScript中6种常见的继承方式
a1239361527的博客
10-16 996
在实际编码的过程中，如果有很多类似的方法都存放于构造函数中，这样会导致内存的浪费（内存泄漏），在这种情况下我们就需要用到继承。
JS实现继承的6种方式
weixin_53953052的博客
02-21 562
JS实现继承的6种方式
Js实现继承的6种方式
热门推荐
wuliyouMaozhi的博客
07-21 2万+
Js实现继承的6种方式: 1.原型链继承 2.借用构造函数继承 3.组合继承（经典继承） 4.原型式继承 方法一： 方法二：Object.create() 5.寄生式继承 6.寄生组合式继承 7.ES6、Class实现继承
javascript 继承实现方法
10-29
javascript的继承机制并不是明确规定的,而是通过模仿实现的,意味着继承不是由解释程序处理,开发者有权决定最适合的继承方式.
JavaScript实现继承的4种方法总结
10-25
主要介绍了JavaScript实现继承的4种方法总结,本文给出了原型链继承、构造继承、实例继承、拷贝继承等实现JS继承的方法,需要的朋友可以参考下
JavaScript模拟实现继承的方法
12-11
本文实例讲述了JavaScript模拟实现继承的方法。分享给大家供大家参考。具体分析如下： 我们都知道，在JavaScript中只能模拟实现OO中的”类”，也就意味着，在JavaScript中没有类的继承。我们也只能通过在原对象里...
Javascript中3种实现继承的方法和代码实例
10-25
主要介绍了Javascript中3种实现继承的方法和代码实例,这3种方法分别为对象冒充、原型继承、上二者的混合,需要的朋友可以参考下
javascript中继承的几种方式
m0_63153901的博客
06-12 3813
在实际编码的过程中，如果有很多类似的方法都存放于构造函数中，这样会导致内存的浪费（内存泄漏），在这种情况下我们就需要用到继承。所谓继承就是通过某种方式让一个对象可以访问到另一个对象中的属性和方法。通过实例化一个函数使子类的原型指向父类的实例，子类就可以调用到父类的属性和方法。代码实现如下： 要注意的问题 1.不要忘记默认的类型： 在js中所有的引用类型都继承了Object，而继承也是通过原型链实现的。所有存在于Object原型对象上的方法同样也存在。比如：hasOwnProperty()、toString(
Js理解之路：Js常见的6中继承方式
qq_51066068的博客
07-25 3872
一、JS 实现继承的几种方式 第一种：原型链继承 二、构造函数继承（借助call方法） 三、组合继承（原型链继承+构造函数继承） 第四种：原型式继承（借助Object.create） 第五种：寄生式继承 第六种：寄生组合式继承 二、ES6 的 extends 关键字实现逻辑......
JavaScript实现继承的六种方式
weixin_42447364的博客
06-08 255
继承
js的六种继承方式
weixin_41759744的博客
06-15 7104
1、原型链继承 核心： 将父类的实例作为子类的原型 特点： 1.非常纯粹的继承关系，实例是子类的实例，也是父类的实例 2.父类新增原型方法/原型属性，子类都能访问到 3.简单，易于实现缺点： 1.要想为子类新增属性和方法，必须要在new Animal()这样的语句之后执行，不能放到构造器中 2.无法实现多继承 3.来自原型对象的所有属性被所有实例共享（来自原型对象的引用属性是所有实例共享的） 4.创建子类实例时，无法向父类构造函数传参2、构造函数继承（借助 call） 核心：使用父类的构造函数来增强子类实例
JavaScript继承(六种方式)（一）
10-21 763
前言：大多OO语言都支持两种继承方式： 接口继承和实现继承 ，而ECMAScript中无法实现接口继承，ECMAScript只支持实现继承，而且其实现继承主要是依靠 原型链 来实现。 1.原型链 基本思想：利用原型让一个引用类型继承另外一个引用类型的属性和方法。 构造函数，原型，实例之间的关系：每个构造函数都有一个原型对象，原型对象包含一个指向构造函数的指针，而实例都包含一个指向
javascript继承的几种方式
加强前端基础
04-29 162
javascript继承的几种方式
Javascript实现继承的6种方式
博勋的博客
08-06 4841
一.类式继承 简介：将父类对象的实例赋值给子类的原型，则子类的原型可以访问父类原型上的属性和方法，以及父类构造函数中复制的属性和方法。 //1.类式继承 //声明父类 function SuperClass() { this.superValue = true; } //为父类添加公有方法 SuperClass.prototype.getSuperValue = function () {
在javaScript中实现继承方法
06-02
在 JavaScript 中，实现继承方法有以下几种方式： 1. 原型继承：利用原型链实现继承。通过将父类的实例作为子类的原型，子类就可以访问到父类的属性和方法。例如： ```javascript function Parent() { this.name ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值