前端路线--JS高阶(day02)

实例成员和静态成员

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//构造方法
		function Person (name,age) {
			this.name=name;
			this.age=age;
		}
		//实例成员:构造函数内this指向的,构造函数内的方法和属性  -->属于实例化对象的  必须new出来
		var p=new Person('小谷',10);
		
		//静态成员	构造函数名.属性(方法)				-->属于构造器的
		Person.sex='女';      //new出来的p里没有sex属性   而构造器内的有
		console.log(p);
	</script>
</html>

原型对象和对象原型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>你好哇</h1>
		<script type="text/javascript">
			//构造方法
			function Person (name,age) {
				this.name=name;
				this.age=age;
			}
			
			//原型对象:prototype		<构造器的属性>  构造器.prototype.方法=function(){}  
			Person.prototype.say=function () {				//所有的对象共享此方法
				console.log('我是原型对象里的say方法');
			}
			
			var p1=new Person('小谷',10);
			var p2=new Person('小好',12);
			p1.say();
			console.log('----------------');
			p2.say();
			
			//对象原型:__proto__  ||  [[prototype]](谷歌的升级过后的表示方法)  <对象的属性> 
			console.log(p1);//看p1的对象原型
			console.log(Person.prototype);//看构造器的原型对象
			
			
			/* 
				为了节省空间,在内存中会开辟出构造器原型对象的空间prototype	
				而为了连接对象,在对象内加了个对象原型__proto__ 
				prototype和__proto__ 是完全一样的。
			*/
		</script>
	</body>
</html>

前端路线--JS高阶(day02)_第1张图片

对象原型下的constructor

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//在每个对象原型下都有一个constructor,它指向了当前原型对象的构造函数
			//constructor:f Person(name,age)
		</script>
	</body>
</html>

前端路线--JS高阶(day02)_第2张图片

原型链

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
				原型链:
				当访问一个对象的属性或者方法时,首先在自身的构造函数中去查找,如果没有,择取对象原型去查找
				若还没有则去父级的对象原型中去找,直到找到顶层Object,这个过程形成的链,叫做原型链。
			 */
		</script>
	</body>
</html>

前端路线--JS高阶(day02)_第3张图片

一些方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		function Person (name,age) {
			this.name=name;
			this.age=age;
		}
		var p=new Person('小谷',10);
		
			// 判断该对象是否含有自己的属性				对象.hasOwnProperty('属性名');
			console.log(p.hasOwnProperty('name'));
			
			//判断当前对象是否在传入的参数对象的原型链上
			console.log(Person.prototype.isPrototypeOf(p));
		</script>
	</body>
</html>

通过原型扩展内置方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//通过原型为数组对象添加求平均值的方法
			Array.prototype.avg=function () {
				var sum=0;
				for (var i = 0; i < this.length; i++) {
					sum+=this[i];
				}
				return sum/this.length;
			}
			
			var arr=new Array(1,2,3);
			console.log(arr.avg());
		</script>
	</body>
</html>

补充iframe

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 600px;
				background-color: aqua;
				float: left;
			}
			iframe{
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="01-实例成员和静态成员.html" target='main'>跳转01</a><br>
			<a href="02-原型对象和对象原型.html" target='main'>跳转02</a>
		</div>
		
		<!-- 在网页内又嵌套了一个网页,一般用于后台的管理界面,左侧点击右侧跳转 -->
		<!-- 需要在a标签中加入target='iframe中的名字'    iframe中加name='名字'-->
		<iframe src="01-实例成员和静态成员.html" width="300" height="600" name="main"></iframe>
	</body>
</html>

this的指向问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 
			普通函数:		window
			自执行函数:		window
			定时器函数:		window
			构造函数:		指向当前实例化对象
			事件绑定函数:		绑定事件的事件源
		 */
	</script>
</html>

改变this的指向的方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var p={
			name:'lucy',
			sex:'女'
		}
		function say (x,y) {
			console.log(this);
			console.log(x,y);
		}
		//默认指向window
		// say(2,3);
		
		//改变this指向问题  方法名.call(被指向的对象,参数)  指向第一个对象
		say.call(p,2,6)
		//方法名.bind(被指向的对象,参数)();  会返回一个新函数,若想使用必须调用
		say.bind(p,2,6)();
		// 方法名.apply(被指向的对象,[参数])
		say.apply(p,[5,6]);
	</script>
</html>

你可能感兴趣的:(前端,javascript,前端,原型模式)