ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-02-20 08:53:32  阅读:298  来源: 互联网

标签:function name age alert job call apply showName 构造函数


构造函数

<!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>

标签:function,name,age,alert,job,call,apply,showName,构造函数
来源: https://blog.csdn.net/weixin_43152725/article/details/86483058

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有