js进阶学习之--面向对象继承

最新推荐文章于 2024-05-07 18:19:15 发布

Web攻城狮

最新推荐文章于 2024-05-07 18:19:15 发布

阅读量999

点赞数 1

分类专栏： js 文章标签： js进阶学面向对象继承 js

本文链接：https://blog.csdn.net/b1244154318/article/details/52133435

版权

js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

js进阶学习之--面向对象继承

JS中一共有三种继承方式：
1、prototype
2、call
3、apply

1.实现一个例子：
1) 创建三个对象对象A 对象B 对象C
2) A中有三个属性 a属性,b属性,c方法
3) B中有个2个属性 d方法,e方法
4) 使B继承A
5) C中有个1个属性 f属性
6) 使C继承B 并调用c方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过原型对象实现继承</title>
	<script>
		
		function A(){
			this.a = "OK";
			this.b = "YES";
		}
		
		A.prototype.c = function(){
			console.log("我是C");
		}




		function B(){
			this.ooo = "你好";
		}

		B.prototype = new A();

		B.prototype.d = function(){
			console.log("我是D");
		}

		B.prototype.e = function(){
			console.log("我是E")
		}


		function C(){
			this.name = "xcy";
		}

		C.prototype = new B();

		var cObj = new C();

		console.log(cObj);

	</script>
</head>
<body>
	
</body>
</html>

call和apply实现继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>call和apply继承</title>
	<script>

		//原型继承方式弊端：无法向超类构造函数中传递参数
		 function Person(name,sex,age){
		 	this.name = name;
		 	this.sex = sex;
		 	this.age = age;
		}

		 Person.prototype = {
		 	constructor:Person,
		 	eat:function(){
		 		console.log("吃饭");
			},
		 	say:function(){
		 		console.log("说话");
		 	}
		 }



		 function Programmer(){
			this.charecter = "宅男";
		 	this.aaa = "AAA";
		 }
		 Programmer.prototype = new Person();

		 Programmer.prototype.writeCode = function(){
		 	console.log("写代码");
		 }

		 var programmer = new Programmer();
		
		programmer.eat()


		//call方法：
		//call方法的第一个参数如果是对象的话会改写被调用函数中this指向，this的指向就会变成第一个参数这个对象
		//fn01.call(obj);



		//call或apply继承时的弊端：这两个方法继承时只能继承实例属性，无法继承原型对象下的属性

		 function Person(name,sex){
		 	this.name = name;
		 	this.sex = sex;
		 }
		 Person.prototype.eat = function(){
		 	console.log("吃饭");
		 }
		 function Programmer(name,sex){
		 	Person.call(this,name,sex);
		 }
		 var p = new Programmer("Tom","男");
		

		 function Person(){
		 	this.name = arguments[0];
		 	this.sex = arguments[1];
		 }

		 function Programmer(name,sex){
		 	Person.apply(this,[name,sex]);
		 }


		 var p = new Programmer("张三","女");

		 console.log(p);

		//var result = Math.max.apply(null,[2,1,3,-1]);//result=3
		//var result = Math.min.apply(null,[2,1,3,-1]);//result=-1
		//console.log(result);

	</script>
</head>
<body>
	
</body>
</html>

组合继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组合继承</title>
	<script>
		function Person(name,sex,age){
			this.name = name;
			this.sex = sex;
			this.age = age;
		}

		Person.prototype.eat = function(){
			console.log("吃饭");
		}



		function Programmer(name,sex,age){
			this.hobby = ["看书"];
			Person.call(this,name,sex,age);
			//使用call继承实例属性可以在实例化子类时向父类中传递参数
		}

		Programmer.prototype = Person.prototype; 
//如果使用new Person()，会导致重复实例属性，并且Person构造函数会被调用两次

		Programmer.prototype.writeCode = function(){
			console.log("写代码");
		}


		var programmer = new Programmer("张三","男",30);
		console.log(programmer);
	</script>
</head>
<body>
	
</body>
</html>

Web攻城狮

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js进阶学习之--面向对象继承

js进阶学习之--面向对象继承JS中一共有三种继承方式：1、prototype2、call3、apply1.实现一个例子：1) 创建三个对象对象A 对象B 对象C 2) A中有三个属性 a属性,b属性,c方法3) B中有个2个属性 d方法,e方法4) 使B继承A5) C中有个1个属性 f属性6) 使C继承B 并调用c方法
复制链接

扫一扫