前端 JS基础理论总结（十）

工厂模式创建对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>工厂模式创建对象</title>
	<script type="text/javascript">
		function Person(name,age,job){
			//创建一个空对象
			// var o = new Object();//方式一
			var o = {};//方式二

			o.name = name;
			o.age = age;
			o.job = job;

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

			return o;
		}

		var Tom = Person('tom',18,'程序猿');
		Tom.showJob();

		var Jack = Person('jack',19,'攻城狮');
		Jack.showJob();
	</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;

			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>

新增选择器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新增选择器</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.querySelector('#div1');
			alert(oDiv);//弹出[object HTMLDivElement]，表示选择了该Div

			//如果要选择多个元素用querySelectorAll
			var aLi = document.querySelectorAll('.list li');
			alert(aLi.length);//8
		}
	</script>
</head>
<body>
	<div id="div1">这是一个div元素</div>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

前端 JS基础理论总结（十）

工厂模式创建对象

构造函数

原型模式

call和apply

函数的继承

新增选择器

猜你喜欢