js原型、原型链、继承的理解

一、原型、原型链

原型是Javascript中的继承的基础，JavaScript的继承主要依靠原型链来实现的。

原型

在JavaScript中，我们创建一个函数A(就是声明一个函数), 就会为该函数创建一个prototype属性。而且也会在内存中创建一个对象B，A函数的属性 prototype 指向这个对象B( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor， constructor属性指向函数A ( 意思就是说：constructor属性的值是函数A )。

看下面的代码：

<body>
    <script type="text/javascript">
    	/*
    		声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
    		创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
    		有一个属性叫constructor 执行了这个函数
			
			注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
		*/
	    function Person () {
	    	
	    }	    
    </script>
</body>

下面的图描述了声明一个函数之后发生的事情：

当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候，那么这个对象就会存在一个默认的不可见的属性，来指向了构造函数的原型对象。这个不可见的属性我们一般用 [[prototype]] 来表示，只是这个属性没有办法直接访问到。

看下面的代码：

<body>
    <script type="text/javascript">
	    function Person () {
	    	
	    }	
        /*
        	利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
        	指向了构造函数的原型对象。
        */
      	var p1 = new Person();
    </script>
</body>

观察下面的示意图：

原型链

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。假如让一个原型对象等于另一个类型的实例，那么此时的原型对象将包含一个指向另一个原型的指针，相应的，另一个原型中也包含一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立，如此层层递进，就构成了实例与原型的链条，这就是我们说的原型链。

实现原型链有一种基本模式，代码如下：

function SuperType() {
  this.prototype = true;
}
SuperType.prototype.getSuperValue = function () {
  return this.prototype
}

function SubType () {
  this.subprototype = false;
}
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
  return this.subprototype 
}

var instance = new SubType();
alert(instance.getSuperValue()); // true

以上代码定义了两个类型：SuperType和SubType。每个类型分别有一个属性和方法。它们的主要区别是SubType继承了SuperType，而继承是通过创建SuperType实例。换句话说，原来存在于SuperType的实例中的所有属性和方法，现在也存在于SubType.prototype中了。在确立了继承关系之后，我们给SubType.prototype添加了一个方法，这样就在继承了SuperType的属性和方法的基础上又添加了一个新方法。这个例子中的实例及构造函数和原型之间的关系如图：

二、继承

继承的方法：1.原型链继承；2.构造函数继承；3.组合继承； 4.原型式继承； 5.寄生式继承；6.寄生组合式继承；

我们先定义一个父类

原型链继承

function SuperType() {
  this.property = true;
}
SuperType.prototype.getSuperValue = function() {
  return this.property;
}
function SubType() {
  this.Subproperty = false;
}
SubType.prototype = new SuperType(); // 继承了SuperType
SubType.prototype.getSubValue = function() {
  return this.Subproperty ;
}
var instance = new SubType();
alert(instance.getSuperValue()) // true

继承原理：通过让子类的原型等于父类的实例，来实现继承。
优点：继承了超类型的构造函数的所有属性和方法。
缺点：1、在创建子类实例时，无法向超类型的构造函数传参，继承单一。
　　　2、所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型引用类型的属性，另一个实例的原型属性也会被修改！）

function SuperType() {
  this.colors = ['red','blue','green'];
}
function SubType() {
}
SubType.prototype = new SuperType(); // 继承方法

var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red','blue','green','black']

var instance2 = new SubType();
console.log(instance2.colors); // ['red','blue','green','black']

构造函数继承

function SuperType() {
  this.colors = ['red', 'blue', 'green'];
}
function SubType() {
  SuperType.call(this); //  继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push('black');
console.log(instance1.colors); // ['red', 'blue', 'green', 'black']

var instance2 = new SubType();
console.log(instance2.colors); // ['red', 'blue', 'green']

在子类的内部调用父类，通过call改变父类中this的指向。等于是复制父类的实例属性给子类。
优点：可以在子类构造函数中，向超类型构造函数传递参数。
缺点：只继承了父类构造函数的属性，没有继承父类原型的属性。所有的方法都在构造函数中定义，无法实现复用，影响性能。

组合继承（原型链+构造函数）

function SuperType(name) {
  this.name = name;
  this.colors = ['red','blue','green'];
}
SuperType.prototype.sayNAme = function() {
  alert(this.name);
}
function SubType(name,age) {
  SuperType.call(this, name); // 继承属性
  this.age = age;
}
SubType.prototype = new SuperType(); // 继承方法
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
  alert(this.age);
}

var instance1 = new SubType('xxx', 15);
instance1.colors.push('black');
console.log(instance1.colors); // ['red','blue','green','black']
instance1.sayNAme(); // xxx
instance1.sayAge(); // 15

var instance2 = new SubType('yyy', 12);
console.log(instance2.colors); // ['red','blue','green']
instance2.sayNAme(); // yyy
instance2.sayAge(); // 12

使用原型链实现对原型属性和方法的继承，通过构造函数来实现对实例属性的继承。这样既通过在原型上定义方法实现了函数的复用，又能够保证每个实例都有它自己的属性。
缺点：调用两次父类构造函数。

三、与原型有关的几个属性和方法

2.1 prototype属性

prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

参考前面的示意图。

2.2 constructor属性

constructor属性存在于原型对象中，他指向了构造函数

看下面的代码：

<script type="text/javascript">
	function Person () {
	}
	alert(Person.prototype.constructor === Person);	// true
	var p1 = new Person();
  	//使用instanceof 操作符可以判断一个对象的类型。  
  	//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
	alert(p1 instanceof Person);	// true
</script>

我们根据需要，可以Person.prototype 属性指定新的对象，来作为Person的原型对象。

但是这个时候有个问题，新的对象的constructor属性则不再指向Person构造函数了。

看下面的代码：

<script type="text/javascript">
	function Person () {
		
	}
	//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
	Person.prototype = {
		name:"志玲",
		age:20
	};
	var p1 = new Person();
	alert(p1.name);  // 志玲

	alert(p1 instanceof Person); // true
	alert(Person.prototype.constructor === Person); //false
  	//如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
  	/*
  	Person.prototype.constructor = Person;	//让constructor重新指向Person函数

  	*/
</script>

2.3 _ _ proto _ _属性(注意：左右各是2个下划线)

用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。

但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.proto

但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

<script type="text/javascript">
	function Person () {
		
	}
	//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
	Person.prototype = {
		constructor : Person,
		name:"志玲",
		age:20
	};
	var p1 = new Person();

	alert(p1.__proto__ === Person.prototype);	//true
	
</script>

2.4 hasOwnProperty() 方法
大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

那么如何判断这个对象的来源呢？

hasOwnProperty方法，可以判断一个属性是否来自对象本身。

<script type="text/javascript">
	function Person () {
		
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "女";
  	//sex属性是直接在p1属性中添加，所以是true
	alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
  	// name属性是在原型中添加的，所以是false
	alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
  	//  age 属性不存在，所以也是false
	alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));
	
</script>

所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。

也即是说，在原型中的属性和不存在的属性都会返回fasle。

如何判断一个属性是否存在于原型中呢？

2.5 in 操作符

in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

<script type="text/javascript">
	function Person () {
		
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "女";
	alert("sex" in p1);		// 对象本身添加的，所以true
	alert("name" in p1);	//原型中存在，所以true
	alert("age" in p1); 	//对象和原型中都不存在，所以false
	
</script>

回到前面的问题，如果判断一个属性是否存在于原型中：

如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。

<script type="text/javascript">
	function Person () {
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "女";
	
	//定义一个函数去判断原型所在的位置
	function propertyLocation(obj, prop){
		if(!(prop in obj)){
			alert(prop + "属性不存在");
		}else if(obj.hasOwnProperty(prop)){
			alert(prop + "属性存在于对象中");
		}else {
			alert(prop + "对象存在于原型中");
		}
	}
	propertyLocation(p1, "age");
	propertyLocation(p1, "name");
	propertyLocation(p1, "sex");
</script>

posted @ 2020-05-22 11:09 Sun~_~ 阅读(2688) 评论(0) 编辑收藏举报

刷新页面返回顶部

Sun_

js原型、原型链、继承的理解

一、原型、原型链

原型

原型链

二、继承

原型链继承

构造函数继承

组合继承（原型链+构造函数）

三、与原型有关的几个属性和方法

2.1 prototype属性

2.2 constructor属性

2.3 _ _ proto _ _属性(注意：左右各是2个下划线)

2.5 in 操作符

公告

Sun_

js原型、原型链、继承的理解

一、原型、原型链

原型

原型链

二、继承

原型链继承

构造函数继承

组合继承 （原型链+构造函数）

三、与原型有关的几个属性和方法

2.1 prototype属性

2.2 constructor属性

2.3 _ _ proto _ _属性(注意：左右各是2个下划线)

2.5 in 操作符

公告

组合继承（原型链+构造函数）