构造函数/原型模式/call和apply/ 函数的继承

最新推荐文章于 2021-11-08 16:20:55 发布

YRyr.*

最新推荐文章于 2021-11-08 16:20:55 发布

阅读量135

点赞数

分类专栏： CSS 文章标签：构造函数/原型模式/call和apply/ 函数的继承

本文链接：https://blog.csdn.net/weixin_43152725/article/details/86483058

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

构造函数

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>构造函数</title>
	<script type="text/javascript">
		function Person(name,age,job){
			this.name = name;
			this.age = age;
			this.job = job;

			this.showName = function(){
				alert(this.name);
			}
			this.showAge = function(){
				alert(this.age);
			}
			this.showJob = function(){
				alert(this.job);
			}
		}

		//new的作用就相当于工厂模式中最开始创建了一个空对象，最后把对象返回
		var Bob = new Person('bob',18,'产品汪');
		Bob.showJob();

		var Alex = new Person('alex',19,'运营喵');
		Alex.showJob();

		alert(Bob.showName == Alex.showName);//false
	</script>
</head>
<body>
	
</body>
</html>

原型模式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>原型模式</title>
	<script type="text/javascript">
		function Person(name,age,job){
			this.name = name;
			this.age = age;
			this.job = job;

			Person.prototype.showName = function(){
				alert(this.name);
			}
			Person.prototype.showAge = function(){
				alert(this.age);
			}
			Person.prototype.showJob = function(){
				alert(this.job);
			}
		}

		//先去自己的对象中找showName函数，再去构造函数的原型找
		var Lucy = new Person('lucy',18,'测试鼠');
		//重写自身对象中的方法，不会影响其它对象
		Lucy.showName = function(){
			alert('我的名字是' + this.name);
		}
		Lucy.showName();//我的名字是lucy

		var Lily = new Person('lily',19,'市场鸡');
		Lily.showName();//lily

		alert(Lucy.showName == Lily.showName);//false
	</script>
</head>
<body>
	
</body>
</html>

call和apply

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>call和apply</title>
	<script type="text/javascript">
		/*
		call和apply的区别

		二者都可以改变当前的this，区别在于apply方法要将参数放入数组中再传参
		*/
		function aa(a,b){
			alert('我的this是' + this + ',我的a是' + a + ',我的b是' + b);
		}

		//我的this是[object Window],我的a是2,我的b是3
		// aa(2,3);

		//我的this是abc,我的a是2,我的b是3
		// aa.call('abc',2,3);

		//我的this是abc,我的a是2,我的b是3
		aa.apply('abc', [2,3]);
	</script>
</head>
<body>
	
</body>
</html>

函数的继承

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数的继承</title>
	<script type="text/javascript">
		//父类
		function Fclass(name, age){
			this.name = name;
			this.age = age;
		}
		Fclass.prototype.showName = function(){
			alert(this.name);
		}
		Fclass.prototype.showAge = function(){
			alert(this.age);
		}

		//子类
		function Sclass(name, age, job){
			//属性用call或者apply的方式来继承
			Fclass.call(this, name, age);
			this.job = job;
		}
		//方法继承：将父类的一个实例赋值给子类的原型属性
		Sclass.prototype = new Fclass();
		Sclass.prototype.showJob = function(){
			alert(this.job);
		}

		//由于已经继承了父类的属性和方法，所以可以直接调用
		var Driver = new Sclass('tom',18,'老司机');
		Driver.showName();
		Driver.showAge();
		Driver.showJob();
	</script>
</head>
<body>
	
</body>
</html>

YRyr.*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
构造函数/原型模式/call和apply/ 函数的继承

构造函数&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;构造函数&lt;/title&gt; &lt;script type="text/javascript"&gt; fun
复制链接

扫一扫

专栏目录