浅谈JavaScript中的原型prototype

之前看过一些关于原型的知识，但总是看了以后没有及时应用，导致再看到一些代码是遇到还是搞不清楚，借此机会谈一下我对prototype的理解。

1、再谈原型之前，我们要知道什么是构造器函数，型如下例：

function Car(){this.wheels=5;this.move=function(){......
}
}

当然我们还遇到有其它格式的函数如：

命名函数：

function car(){......
}

匿名函数(没有名字的函数)：

var a=function(){......
}

即时函数：

(function(){... ...
})()
或者写成
(function(){... ...
}())

2、再者，创建对象的方式有两种：

i:对象文本表示法，如下例：

var car={wheel:5,brand:'BMW',move:function(){alert('This car is mine');}
}

II:通过构造器函数来创建对象，如下例：

function Car(name){this.host=name,this.brand='BMW',this.wheel=4,this.move=function(){return 'This car belongs to'+this.name+'and it has'+this.wheel+'wheels'}
}
然后用这个构造器函数来创建对象
var car=new Car('zhangsan');
>>car.name;
<<'zhangsan'
>>car.move();
<<This car belongs to zhangsan and it has 4 wheels

当我们创建对象的时候，同时也赋予了该对象一个特殊的属性--即构造器属性，该属性实际上指向了用于创建该对象的构造器函数的引用。例如上边创建的构造器函数

>>car.constructor;
<<function Car(name){this.host=name,this.brand='BMW',this.wheel=4,this.move=function(){return 'This car belongs to'+this.name+'and it has'+this.wheel+'wheels'}
}

当然，由于构造器属性所引用的是一个函数，因此我们可以利用它来创建一个其它的新对象。

>>var car2=new car.constructor('lisi');
>>car2.name;
<<'lisi'

3.接下来才进入到本篇的重点--原型prototype

I:每个函数的prototype都指向一个对象；

II：它只有在该函数是构造器时才发挥作用；

III：该函数所创建的对象都会持有一个该prototype属性的引用，并可以将其当做自身的属性来用。

举一个例子：

var people={name:'xiaoming',say:function(){return 'I am a'+this.name;
}
}
function F(){... ...
}
F.prototype=people;
//然后我们把F()当做一个构造器函数来创建对象foreigner，那么新的foreigner就会拥有对F.prototype属性(也就是foreigner)的访问权。
>>var foreigner=new F();
>>foreigner.name;
<<'xiaoming'
>>foreigner.say();
<<'I am a xiaoming;'

其实，说白了，对于一个构造函数的原型，也就是一个对象，然后你利用这个构造函数创建一个新对象，那么这个新对象就可以访问对象中的属性以及方法了。

4,那么在平时中我们都是怎样应用的呢？借助上边的例子继续说

I：利用原型添加方法和属性

function F(name,color){this.name=name;this.color=color;this.what=function(){return 'I am a'+this.color+''+this.name;
}
}

F.prototype.sex='male';
F.prototype.age=25;
F.prototype.info=function(){return 'sex:'+this.sex+',age'+this.age;
}
//当然，你也可以定义一个对象然后覆盖到之前的原型上：
F.prototype={sex:'male',age:25,info:function(){return 'sex:'+this.sex+',age:'+this.age;

II:使用原型的方法和属性

>>var people=new F('liwu','red');
>>people.name;
<<'liwu'
>>people.what();
<<'I am a red liwu'
>>people.sex;
<<'male'
>>people.info();
<<'sex:male,age:25'

III:自身属性和原型属性以及如何判断它们

直白的说，位于构造器函数内部的属性是自身属性，位于原型中的属性属于原型属性

例如上边的例子中，name和color是自身属性，而sex和age都属于原型属性，那么当我们想访问获得原型中的属性对应的值时，JavaScript引擎会从自身属性查起，如果查不到，就会转到创建此对象的构造器函数的原型中进行查找，如果在原型中查到了该属性，就立即使用改属性的值。

比如：在自身属性和原型属性中有同名的属性，那么访问该对象的这个属性时，最终获得的是自身属性的值，而不是原型中这个属性的值，这也说明了JavaScript查询的顺序，同时也说明了自身属性的优先级高于原型属性。

5.判断一个对象是不是另一个对象的原型

I：每个对象都会有一个isPrototypeOf()的方法，用来判断一个对象是不是另外一个对象的原型

比如上边第3步中的例子

>>people.isPrototypeOf(foreigner);
<<true

II:大多数浏览器都支持ES5的Object.getPrototypeOf()方法

>>Object.getPrototypeOf(foreigner)==people;
<<true

III:神秘的_proto_链接

前边我们讲到当创建的对象在自身的属性中访问不到我们要找的那个属性时，相应的原型属性就会被纳入到查询范围。就好像其中有一个神秘的链接，指向了相关的原型对象。

在现代的JavaScript环境中，对象中确实存在一个指向相关原型的链接，这个神秘的链接就是_proto_属性，有时我们在浏览器调试的过程中，常常会看到它的身影

>>foreigner._proto_==people;

<<true

另外需要提醒的是_proto_和prototype并不是等价的，_proto_实际上是某个实例对象的属性，而prototype是属于构造器函数的属性。

>>typeof foreigner._proto_;

<<'object'

>>typeof foreigner.constructor.prototype;

<<'object'

基本上就介绍到这里吧，随后有新的体会，再继续补充。总觉得这个是你再进一步学习javascript的关键节点，应该学会。

浅谈JavaScript中的原型prototype相关推荐

浅谈JavaScript对象的原型prototype
前提: 在JavaScript中一切皆对象,分为普通对象和函数对象,每个对象都有原型(undefined和null没有原型,所以undefined和null也就没有toSting方法). Object ...
浅谈javascript中原型（prototype）、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
html 滚动条 scrolltop scrollheight,浅谈JavaScript中scrollTop、scrollHeight、offsetTop、offsetHeight...
浅谈JavaScript中scrollTop.scrollHeight.offsetTop.offsetHeight 发布时间:2020-07-17 09:27:20 来源:亿速云阅读:223 作者 ...
浅谈JavaScript中的NaN
浅谈JavaScript中的NaN NaN概念以及简单案例追寻的纯粹该拥有自己的本质.-JC.F 什么是NaN? NaN:NaN(Not a Number),它表示不是数字,但是仍是数值类型. Na ...
浅谈JavaScript继承与原型链
对于使用过基于类的语言(如java或C++)的开发人员来说,JavaScript有点令人困惑,因为它是动态的,并且本身不提供一个class实现. 在(es5/es6)中引入class关键字,但那只是语 ...
JavaScript中的原型(prototype)与继承
在JavaScript中,原型是用来模仿其他「类」语言继承机制的基础.原型并不复杂,原型只是一个对象. 一.原型对象 1.1 什么是原型对象每当我们创建了一个函数后,这个函数就拥有了一个protot ...
说一说JavaScript 中的原型ProtoType
一时兴起,写一遍博客吧. "函数是函数,函数也是对象" 相信学过js 的同学看到这句话很熟悉.我表示耳朵都听出茧子了. 我们都知道,在JavaScript中是没有类的概念的,那么怎 ...
JavaScript中的原型prototype及原型链
原型prototype 简介: prototype里面放置了一种类的公用的方法(构造函数:constructor)和类的信息.因此可以用来作为一种类的共享数据实现机制.这种共享的另一个好处的是减少了内 ...
浅谈JavaScript中闭包
引言闭包可以说是JavaScript中最有特色的一个地方,很好的理解闭包是更深层次的学习JavaScript的基础.这篇文章我们就来简单的谈下JavaScript下的闭包. 闭包是什么? 闭包是什么 ...

浅谈JavaScript中的原型prototype

浅谈JavaScript中的原型prototype相关推荐

最新文章

热门文章