JavaScript 面向对象-继承

最新推荐文章于 2024-01-18 09:27:49 发布
最新推荐文章于 2024-01-18 09:27:49 发布
阅读量87 收藏
点赞数

JavaScript 面向对象 - 继承

1. 继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>继承</title>
</head>
<body>
	<script type="text/javascript">
		(function(){
			/**
			 * 继承
			 * 		什么叫继承
			 * 			就是一个对象想用另一对象中的方法,借用了这种方法就是继承
			 *
			 * 		继承的几种方式
			 * 			for...in继承
			 * 			原型继承
			 * 			经典继承
			 */
		})()
	</script>
</body>
</html>

方式1 for in 继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>for...in继承</title>
</head>
<body>
	<script type="text/javascript">
		(function(){
			/**
			 * for...in继承
			 */
			var obj = {
				name : "jianyan",
				age : 24,
				sex : "male"
			};

			var o = {};

			for(var k in obj){
				o[k] = obj[k]
			}
			console.log(o.name);	// jianyan
		})()
	</script>
</body>
</html>

方式2 原型继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原型继承</title>
</head>
<body>
	<script type="text/javascript">
		(function(){
			/**
			 * 原型继承
			 * 		1.直接给原型对象中(利用对象的动态特性)
			 * 		2.直接替换原型对象
			 * 			导致之前原型中的方法失效
			 */
			
			// 1.直接给原型对象中(利用对象的动态特性)
			function Animate(name,age){
				this.name = name;
				this.age = age;
				this.say = function(){
					console.log(this.name);
				}
			}
			Animate.prototype.sayHello = function(){
				console.log("我是sayHello方法");
			}
			var pandon = new Animate("dog",3);
			console.log(pandon.name);	// dog
			console.log(pandon.age);	// 3
			pandon.say();				// dog
			pandon.sayHello();			// 我是sayHello方法

			/*// 2.直接替换原型对象
			function Animate(name,age){
				this.name = name;
				this.age = age;
			}
			Animate.prototype.say = function(){
				console.log(this.name);
			}
			var newAnimate = {
				sayHello : function(){
					console.log("我是sayHello方法");
				}
			}
			Animate.prototype = newAnimate;
			// newAnimate.constructor = Animate;

			var pandon = new Animate("dog",3);
			console.log(pandon.name);	// dog
			console.log(pandon.age);	// 3
			// pandon.say();			// pandon.say is not a function
			pandon.sayHello();			// 我是sayHello方法
			// 显而易见,当原型对象修改后,之前的原型对象方法失效*/

			// 混入的方式
			/*function Animate(name,age){
				this.name = name;
				this.age = age;
			}
			Animate.prototype.say = function(){
				console.log(this.name);
			}
			var newAnimate = {
				sayHello : function(){
					console.log("我是sayHello方法");
				}
			}
			for(var k in newAnimate){
				Animate.prototype[k] = newAnimate[k];
			}
			var pandon = new Animate("dog",3);
			console.log(pandon.name);	// dog
			console.log(pandon.age);	// 3
			pandon.say();				// dog
			pandon.sayHello();			// 我是sayHello方法*/
		})()
	</script>
</body>
</html>

方式3 经典继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>经典继承</title>
</head>
<body>
	<script type="text/javascript">
		/**
		 * 经典继承
		 * 		语法
		 * 			Object.create(obj);
		 * 			例 var o1 = Object.create(o2)	o1继承o2
		 * 		兼容解决
		 * 			
		 * 		
		 */
		/*var o = {
			name : "jianyan"
		}
		var obj = Object.create(o);
		console.log(obj.name);		// jianyan*/

		// 兼容解决****************************************
		/*if(Object.create){
			var o = Object.create(obj);
		}else{
			Object.create = function(){
				function F(){

				}
				F.prototype = obj;
				var o = new F()
			}
			var o = Object.create(obj);
		}*/
		
		var Animate = {
			getName : function(){
				return this.name;
			},
			getAge : function(){
				return this.age;
			}
		}
		var pandon = Object.create(Animate,{
			name:{value:"ajian"},
			age:{value:2}
		})
		console.log(pandon.name);	// ajian
		console.log(pandon.age);	// 2
	</script>
</body>
</html>

方式4 构造函数继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>构造函数继承</title>
</head>
<body>
	<script type="text/javascript">
		(function(){
			/**
			 * 构造函数继承
			 * 		父.call()
			 * 			父类.call(obj,参数1,参数2)
			 * 		父.apply()
			 * 			父类.apply(obj,[参数1,参数2])
			 * 			也可以写成, 父类.apply(obj,arguments)
			 *    	*** obj指当前的对象，可以使用this代替
			 *
			 * 		两者优缺点
			 * 			两者都可以继承
			 * 			推荐apply,如果继承的参数较多的话,使用call,如果参数缺少,就会报错
			 *
			 * 		
			 * 		缺点,子类只能继承父类内的属性和方法,但不能继承父类.prototype的方法
			 */
			
			/*// 父.call()
			function Animate(name){
				this.name = name;
			}
			Animate.prototype.say = function(){
				console.log("这是Animate的say方法");
			}
			function Pandon(name,age){
				this.age = age;
				// Animate.call(Pandon,name,age);	// undefined
				Animate.call(this,name,age);
			}
			var newPandon = new Pandon("pandon",3);
			console.log(newPandon.name);	// pandon
			console.log(newPandon.age);		// 3
			// newPandon.say();				// say is not a function*/

			/*// 父.apply()
			function Animate(name){
				this.name = name;
			}
			Animate.prototype.say = function(){
				console.log("这是Animate的say方法");
			}
			function Pandon(name,age){
				Animate.apply(this,arguments);
				this.age = age;
			}
			var newPandon = new Pandon("pandon",3);
			console.log(newPandon.name);	// pandon
			console.log(newPandon.age);		// 3
			newPandon.say();				// say is not a function
			// *** 显而易见,apply不能继承父类.prototype方法*/
		})()
	</script>
</body>
</html>

方式5 混合式继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>混合式继承</title>
</head>
<body>
	<script type="text/javascript">
		(function(){
			/**
			 * 混合式继承
			 *
			 * 		在说下构造函数的缺点
			 * 			构造函数生成实例后,该实例只能继承该实例的构造函数内的属性和方法,
			 * 			但不能访问到该实例的构造函数的prototype的方法
			 *
			 * 		解决
			 * 			混合式继承
			 */
			function Animate(name){
				this.name = name;
			}
			Animate.prototype.say = function(){
				console.log("我是Animate的say方法");
			}

			function Pandon(name,age){
				// 利用apply继承父类
				Animate.apply(this,arguments);
				this.age = age;
			}
			// 子类的原型执行父类的实例
			Pandon.prototype = new Animate();	// 该实例可以访问到实例的构造函数和对应的原型
			// 实例化
			var newPandon = new Pandon("pandon",3);
			console.log(newPandon.name);	// pandon
			console.log(newPandon.age);		// 3
			newPandon.say();				// 我是Animate的say方法
		})()
	</script>
</body>
</html>
lizhoutx1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈JavaScript面向对象--继承
10-17
继承是面向对象编程（OOP）的核心概念之一，在JavaScript中实现继承有多种...以上内容详细解释了JavaScript面向对象继承的概念和实现步骤，相信对于正在学习或准备深入学习JavaScript的开发者来说具有重要的参考价值。
JavaScript面向对象-动力节点共7页.pdf.z
11-22
JavaScript面向对象是编程语言JavaScript中的核心概念之一，它在实际开发中扮演着至关重要的角色。JavaScript，虽然最初设计为一种轻量级的脚本语言，但随着其发展，逐渐引入了面向对象的特性，使得它能够支持更复杂...
【JavaScript】面向对象继承
山赶着山，山山漫漫结成关
12-27 995
对象编程很重要的一方面，就是对象的继承。A对象通过继承B对象，就能直接拥有B对象的属性和方法。这对于代码的复用是非常有用的。大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript语言的继承不通过class（ES6引入了class语法），而是通过“原型对象”（prototype）实现。在JavaScript中，面向对象继承有多种实现方式，每种方式都有其优缺点。选择合适的继承方式取决于具体的需求和场景。
javaScript 面向对象-继承(一)
球球之家
04-22 614
原文来自  博客园 -三生石
JavaScript----面向对象编程
weixin_60291486的博客
08-12 1033
面向对象概述 ES6面向对象语法 构造函数与原型对象 原型链 this的指向 错误处理 继承
【JavaScript】面向对象之继承
m0_68324632的博客
01-18 1140
重学JavaScript06----- 面向对象之继承 文章目录重学JavaScript06----- 面向对象之继承继承1、了解原型链2、Object的原型3、通过原型链实现继承原型链继承的弊端4、借用构造函数继承借用构造函数也是有弊端的5、通过原型式继承函数继承6、寄生式继承函数7、寄生组合式继承 继承 继承可以帮助我们将重复的代码和逻辑抽取到父类中，子类只需要直接继承过来使用即可。 1、了解原型链 在真正实现继承之前，我们先来理解一个非常重要的概念：原型链。 从一个对象上获取属性，如果在当前对象中
javascript面向对象--阮一峰
a1013774673的博客
06-28 221
阮一峰的个人网站,几篇有关js面向对象的文章，简单易懂，记录参考学习之。 1.Javascript诞生记 2.Javascript继承机制的设计思想 3.Javascript 面向对象编程（一）：封装 4.Javascript面向对象编程（二）：构造函数的继承 5.Javascript面向对象编程（三）：非构造函数的继承 6.学习Javascript闭包（Closure） ...
Javascript面向对象的继承
weixin_60488295的博客
11-25 2568
面向对象的继承 原型链继承 子类构造函数的原型对象 = 父类构造函数的实例化对象; 原型链查找: 找自身 自身没有 找自身的原型对象(父类构造函数的实例化对象) 如果没有 找父类构造函数的原型对象 找object 如果没有 返回undefined 如果在哪一步找到了 直接返回结果 ​ constructor: 当前对象的构造函数 ​ 原型链继承: 1. 无法识别当前对象真正的构造函数 2. 一改全改 3. 不能传参 ...
JS学习笔记19-面向对象-继承
欢迎访问我的主页：https://www.bookbook.cc
05-21 8246
文章目录一、call()方法1.1 使用call()方法实现继承1.2 使用for循环实现继承对象的方法二、拖拽和继承2.1 实现封装和继承 一、call()方法 在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域。 一般来说，this总是指向调用某个方法的对象，但是使用call()方法时，就会改变this的指向。 实例： <script> function show(a,b){ console.log('this是:'+this+'\
前端 JavaScript 设计模式前奏--面向对象-封装、继承、多态
黑木令之佛性
01-06 1047
JavaScript 面向对象 如图所示: 1. 什么是面向对象 1. 面向对象的概念 2. 面向对象的三要素: 继承/封装/多态 ⭐️ 3. JS 的应用举例 4. 面相对象的意义 --- 数据结构化 2. 面向对象 的概念: 类 + 对象 1. 面向对象 的概念: 类 + 对象 1. 类(模板) / 对象(实例) 1. 通过 class 这个 类(模板)来实例化很多对象 (如同 ES5 的构造函数一样) 。 2.1 对象(实例): 类图关系如图所示: 1. 对象(实例):
JavaScript--面向对象原型继承
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-12 577
1. 面向对象原型继承 面向对象编程 JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。如果你熟悉Java或C#，很好，你一定明白面向对象的两个基本概念： 所以，类和实例是大多数面向对象编程语言的基本概念。 在JavaScript中，这个概念需要改一改。JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。 原型是指当我们想要创建 xiaoming 这个具体的学生时，我们并没有一个 Student 类型 可用。那
javascript面向对象二-“继承”
王勇霞 信息技术提高班九期
03-10 1291
让我们接着上篇博客继续javascript的面向对象特征。这次说“继承”。 当开始听到javascript的继承时有点疑惑，因为在javascript中没有“类”的概念，怎么会继承呢？在javascript中有什么呢？有对象，有函数，通常在一个对象中定义变量，属性，还定义函数（内置）。这种结构像极了类。继承其实就是复用一些东西，在javascript中，我们可以把这种函数看成是一个类，然后进
JavaScript面向对象编程--继承.mht
09-03
JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht,JavaScript面向对象编程--继承.mht
Javascript之面向对象--接口
10-20
在深入探讨JavaScript面向对象编程中的接口概念之前，我们需要先了解一些基本概念。面向对象编程是一种编程范式，它使用“对象”来表示数据和方法。接口则是一种定义和约定，它指定对象必须实现的一组方法，但不提供...
Javascript之面向对象--方法
10-20
在JavaScript中，面向对象编程是一种常用的设计模式，它允许我们创建具有属性和方法的对象。本文将深入探讨对象方法、私有方法、静态方法、公有方法以及特权方法。 首先，对象方法是在对象内部定义并可以通过对象...
基于JavaWeb开发的图书管理系统 (源码+数据库).zip-大作业&课程设计
09-07
基于JavaWeb开发的图书管理系统 (源码+数据库).zip-大作业&课程设计，本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 基于JavaWeb开发的图书管理系统 (源码+数据库).zip-大作业&课程设计，本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 基于JavaWeb开发的图书管理系统 (源码+数据库).zip-大作业&课程设计，本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 基于JavaWeb开发的图书管理系统 (源码+数据库).zip-大作业&课程设计，本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求如果。
武汉工程大学邮电与信息工程学院在广东2021-2024各专业最低录取分数及位次表.pdf
最新发布
09-07
全国各大学在广东2021-2024各专业最低录取分数及位次表
青岛工学院在广东2021-2024各专业最低录取分数及位次表.pdf
09-07
全国各大学在广东2021-2024各专业最低录取分数及位次表
android studio 配套资源 gradle8.9all
09-07
android studio 配套资源 gradle8.9all
JavaScript面向对象：深入继承与多态
"这篇文章主要探讨了JavaScript中的面向对象编程中的两个关键概念——继承与多态，这是在前文讨论封装的基础上进一步深入的话题。文中通过解释和举例，帮助读者理解相关的基本概念，如变量定义、赋值、作用域以及...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值