JS原型和原型链原理与用法实例详解

2023-08-02 03:48:04 73

本文实例讲述了JS原型和原型链原理与用法。分享给大家供大家参考，具体如下：

Javascript语言的继承机制一直很难被人理解。

它没有"子类"和"父类"的概念，也没有"类"（class）和"实例"（instance）的区分，全靠一种很奇特的"原型链"（prototypechain）模式，来实现继承。

BrendanEich设计javascript之初是为了实现网页与浏览器之间交互的一种简单的脚本语言

如果真的是一种简易的脚本语言，其实不需要有"继承"机制。但是，Javascript里面都是对象，必须有一种机制，将所有对象联系起来。所以，BrendanEich最后还是设计了"继承"。

背景介绍

1.构造函数

构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象。每个构造函数都有prototype(原型)属性

2.原型模式

每个函数都有prototype(原型)属性，这个属性是一个指针，指向一个对象，这个对象的用途是包含特定类型的所有实例共享的属性和方法，即这个原型对象是用来给实例共享属性和方法的。

而每个实例内部都有一个指向原型对象的指针。

原型链

每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含指向原型对象内部的指针。我们让原型对象的实例（1）等于另一个原型对象（2）,

此时原型对象（2）将包含一个指向原型对象（1）的指针，

再让原型对象（2）的实例等于原型对象（3），如此层层递进就构成了实例和原型的链条，这就是原型链的概念

构造函数

构造函数，是一种特殊的方法。主要用来在创建对象时初始化对象。即为对象变量赋初始值。每个构造函数的实例都将共享构造函数的初始值。构造函数的出现是为了解决使用Object构造函数和字面量表示法不方便创建大量重复对象的问题。

传统创建对象实例的方法

varperson={
name:'张女士',
age:'80',
gender:'女'
};
console.log(person)

注：这个方法如果用于创建大量相同属性和方法的对象时，会产生大量重复代码

构造函数的方法

//构造函数方法创建对象实例
functionPerson(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
this.say=function(){
alert(this.name)
}
}
varperson1=newPerson('钟女士',80,'女');
varperson2=newPerson('张女士',80,'女');
console.log(person2)
console.log(person1)

原型模式

使用构造函数的问题是，每个方法都要在每个实例上重新创建一遍，即在构造函数的不同实例上的同名函数是不相等的。而我们创建每个构造函数都有一个prototype(原型)属性，这个属性是个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法，我们使用这个原型对象来共享实例的属性和方法的模式就叫原型模式

//原型模式创建对象
functionPerson(){
}
Person.prototype.name='钟女士';
Person.prototype.age=80;
Person.prototype.gender='女';
varperson1=newPerson();
console.log(person1)
//简写原型模式
Person.prototype={
constructor:Person
name:'钟女士'，
age:80,
gender:'女'
}

注：每个原型对象都有constructor属性，由于简写模式重写了默认的prototype对象，所以constructor也会被重新定义，不再指向他的构造函数，所以可以自己写一个constructor属性指向他的构造函数

原型链

每个构造函数都有原型对象，每个构造函数实例都包含一个指向原型对象的内部指针（proto），如果我们让第一个构造函数的原型对象等于第二个构造函数的实例，结果第一个构造函数的原型对象将包含一个指向第二个原型对象的指针，再然第三个原型对象等于第一个构造函数的实例，这样第三个原型对象也将包含指向第一个原型对象的指针，以此类推，就够成了实例于原型的链条，这就是原型链的基本概念

functionOne(){
}
functionTwo(){
}
functionThree(){
}
Two.prototype=newOne();
Three.prototype=newTwo();
varthree=newThree();
console.log(three);
console.log(three.__proto__===Three.prototype)//true
console.log(three.__proto__.__proto__===Two.prototype)//true
console.log(three.__proto__.__proto__.__proto__===One.prototype)//true
console.log(three.__proto__.__proto__.__proto__.__proto__===Object.prototype)//true

在对象实例中，访问对象原型的方法

1、使用proto属性

此属性是浏览器支持的一个属性，并不是ECMAScript里的属性

2.Object.getPrototypeOf
3.使用constructor.prototype的方法

对于不支持proto的浏览器，可以使用constructor，访问到对象的构造函数，在用prototype访问到原型

使用原型链解释ANUGLAR作用域

在开发过程中，我们可能会出现控制器的嵌套，看下面这段代码：


{{a}}

{{a}}

我们可以看到界面显示了两个1，而我们只在OuterCtrl的作用域里定义了a变量，但界面给我们的结果是，两个a都有值,现在自控制器里的a是从父控制器里继承过来的

我们可以父子级的作用域看成两个原型对象，其中一个原型对象继承另一个原型对象的实例

functionOuter(){
this.a=1;
}
functionInner(){
}
varouter=newOuter();
Inner.prototype=newOuter();
varinner=newInner();
console.log(outer.a)
console.log(inner.a)

Angular的实现机制其实也就是把这两个控制器中的$scope作了关联，外层的作用域实例成为了内层作用域的原型。

既然作用域是通过原型来继承的，自然也就可以推论出一些特征来。比如说这段代码，点击按钮的结果是什么？


{{a}}

{{a}}
a++

JS原型和原型链原理与用法实例详解

背景介绍

1.构造函数

2.原型模式

热门推荐

随机推荐