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

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

它没有"子类"和"父类"的概念,也没有"类"(class)和"实例"(instance)的区分,全靠一种很奇特的"原型链"(prototype chain)模式,来实现继承。

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

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

背景介绍 1.构造函数

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

2.原型模式

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

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

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

原型链

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

此时原型对象(2)将包含一个指向原型对象(1)的指针,

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

构造函数

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

传统创建对象实例的方法

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

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

构造函数的方法

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

原型模式

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

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

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

原型链

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

function One(){ } function Two(){ } function Three(){ } Two.prototype=new One(); Three.prototype=new Two(); var three=new Three(); 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作用域

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4a92ba200ef623eeef560170c3848609.html