明白javascript中的原型

已熟习Javascript的开发者可能会认为原型和对象的关联很亲热,然则这全都与函数有关,原型虽然是定义对象的一种很轻易的体式格局,然则它的实质依然是函数特征。
作为Javascript中的一个轻易体式格局,运用原型所定义的属性会变成实例化对象的属性,从而作为庞杂对象建立的概览。
一切函数在初始化的时刻都有一个prototype属性,该属性的初始值是一个空对象,只要函数在作为组织器(constructor)的时刻,prototype属性才会返回更大的作用,运用new关键字挪用一个函数,使得该函数能够作为组织器举行实例化,并发生一个新的空对象实例作为其上下文
上面看不懂没紧要下面我们就用几个例子来明白一下原型

对象实例化

建立新对象最简朴的要领只要一条语句

var o = {};//并能够为他增加一些属性
o.name = 'Li li';//增加name属性
o.age = '28';    //增加age属性
o.skill = 'english';//增加skill属性
//也能够如下面如许写\
var o {
o.name = 'Li li';
o.age = '28';
o.skill = 'english';
}

上面我们演示了怎样建立一个对象并为之增加三个属性,那末假如我们要建立多个雷同范例的对象实例,分别对属性举行赋值,不仅代码冗杂,还异常轻易失足。此处下面在说

原型作为对象概览

我们先开看代码

function Person () {}
Person.prototype.dance = function () {
 return true
}
var person = new Person;
console.log(person.dance())//true
  

让我们看看发生了什么? 运用new操作符将其作为组织器举行挪用,组织函数被挪用,而且新建立了一个对象也就是他的实例,新建立的函数成了组织函数的上下文,new操作符返回的效果就是对新建立的对象的援用

实例属性

运用new操作符将函数作为组织器举行挪用的时刻,其上下文被定义新对象实例,意味着除了经由过程原型给附加属性的情势不测,我们还能够在组织函数内经由过程this参数初始化值。

function Person () {
 this.swing = false;//false
 this.isSwing = function()
 {return !this.swing}//true
Person.prototype .isSwing = function(){
return this.swing
}
var person = new Person;
console.log(person.swing)
//组织函数和原型同时存在统一要领,效果会是哪一个呢?组织函数的要领优先!person会先在组织函数中找swing,假如没有在去查找原型,假如原型还没有那返回undifined
原型和实例不是复制关联,而是协同关联!,附加到了新建立的对象上

未完待续!

    原文作者:幻灭丶
    原文地址: https://segmentfault.com/a/1190000007974708
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞