JavaScript的原型与原型链

不妨从一个案例入手:


<html>
	<head>
		<meta charset="utf-8"/>
	head>
	<body>
		<div id="weizu">
			
		div>
		
		<script>
			function person(){}
			
			var xm = new person();
			var xg = new person();
			
			xm.name = '小明';
			xg.name = '小刚';
			xg.age = 18;
			
			console.log(xm);
			console.log(xg);
		script>
	body>
html>

JavaScript的原型与原型链_第1张图片
    我们可以每次都去创建某个实例对象的属性,但是,这样就导致了同一个person对象给人的感觉就是怎么一会儿又某个属性,一会没有该属性,为编程人员造成编程的不便。故而我们往往需要在类中加入一些属性,在JavaScript中也就是原型中添加。添加如下:


<html>
	<head>
		<meta charset="utf-8"/>
	head>
	<body>
		<div id="weizu">
			
		div>
		
		<script>
			function person(){}
			person.prototype.name = '张三';
			person.prototype.age = 18;
			
			var xm = new person();
			var xg = new person();
			
			console.log(xm.name, xm.age);
			console.log(xg.name, xg.age);
		script>
	body>
html>

JavaScript的原型与原型链_第2张图片
    上面可以看见,两个实例对象调用的都是相同的内容。那么有没有可能是两个实例对象引用的同一块地址空间?回答这个问题之前,不妨先了解一下:
JavaScript的原型与原型链_第3张图片
上图原文地址:秒懂JavaScript的原型对象与原型链
    也即是:函数对象有prototype指向的对象是原型对象;普通对象有__proto__属性,它所指向的对象就是原型对象;
    我们不妨来看看依据函数对象创建的实例对象的原型对象是不是同一个东西:


<html>
	<head>
		<meta charset="utf-8"/>
	head>
	<body>
		<script>
			function Person(){}
			Person.prototype.name = '张三';
					
			var a = new Person();
			a.name = "123";
			var b = new Person();
			b.name = '234';
			
			console.log(a.name);
			console.log(b.name)
			console.log(a.__proto__ == Person.prototype);
			console.log(a.__proto__ == b.__proto__);
		script>

	body>
html>

JavaScript的原型与原型链_第4张图片
原型对象是一样的, 但是创建的对象是不同的。可以理解成指向的类函数是一样的,new后分配的空间是不同的。

故而一个函数对象创建的多个对象的原型对象是指向的同一个地址空间。

结合上个案例知道,我们创建的实例中没有该属性的时候,就会去原型中找该属性。也就是顺序是:先从对象中找,对象中没有就去原型中找。而会不会出现原型中没有的情况?然后取原型的原型中去找?答案是肯定的,这也就是所谓的原型链的产生。

先了解下判断是否有属性的方法:

  • in : 判断对象是否有某个属性,如果对象中没有,就检查原型中;
  • hasOwnProperty(): 检查对象自身中是否有该属性;

案例不太好举,就不举例了。


参考:
【1】 视频-前端:JavaScript基础+高级+jQuery教程
【2】秒懂JavaScript的原型对象与原型链

你可能感兴趣的:(大前端)