原型对象和原型链,JS原型链和访谈对象原型的主意

JS大旨连串:浅谈 原型对象和原型链

2016/03/01 · JavaScript
· 2 评论 ·
原型对象,
原型链

原稿出处: 一像素   

在Javascript中,万物皆对象,但目的也可能有分别,差少之甚少能够分成两类,即:普通对象(Object)和函数对象(Function)。

貌似来讲,通过new Function发生的靶子是函数对象,别的对象都以日常对象。

比方表明:

function f1(){ //todo } var f2 = function(){ //todo }; var f3 = new
Function(‘x’,’console.log(x)’); var o1 = {}; var o2 = new Object(); var
o3 = new f1(); console.log( typeof f1,//function typeof f2,//function
typeof f3,//function typeof o1,//object typeof o2,//object typeof o3
//object ); >> function function function object object object

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function f1(){
    //todo
}
var f2 = function(){
    //todo
};
var f3 = new Function(‘x’,’console.log(x)’);
 
var o1 = {};
var o2 = new Object();
var o3 = new f1();
 
console.log(
    typeof f1,//function
    typeof f2,//function
    typeof f3,//function
    typeof o1,//object
    typeof o2,//object
    typeof o3 //object
);
>> function function function object object object

f1属于函数的表明,最遍布的函数定义格局,f2实际是三个无名函数,把那个无名函数赋值给了f2,属于函数说明式,f3偶尔见,但也是一种函数对象。

Function是JS自带的目的,f1,f2在创造的时候,JS会自动通过new
Function()的方法来创设这个目的,由此,这三个对象都是通过new
Function()创造的。

在Javascript中创造对象有二种方法:对象字面量和选拔new表明式,o1和o2的创造恰好对应了那三种艺术,珍视讲一下o3,
如若用Java和C#的笔触来精通的话,o3是f1的实例对象,o3和f1是一律类型,最少小编此前这么感到,其实不然…

那便是说怎么精晓吧? 很简短,看o3是还是不是由此new Function发生的,
分明不是,既然不是函数对象,那就是通常对象 。

透过对函数对象和平常对象的简易明了之后,大家再来掌握一下Javascript中的原型和原型链:

在JS中,每当创设三个函数对象f1
时,该对象中都会放到一些天性,当中包蕴prototype和__proto__,
 prototype即原型对象,它记录着f1的一部分性子和格局。

亟待专心的是,prototype
对f1是不可知的,约等于说,f1不会招来prototype中的属性和方法。

function f(){} f.prototype.foo = “abc”; console.log(f.foo); //undefined

1
2
3
function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

那么,prototype有怎么着用啊? 其实prototype的首要成效正是持续。
通俗一点讲,prototype中定义的属性和艺术都以预留自个儿的“后代”用的,由此,子类完全能够访问prototype中的属性和艺术。

想要知道f1是何许把prototype留给“后代”,大家须要精通一下JS中的原型链,此时,JS中的
__proto__
登台了,那男士长的很古怪,隐蔽的也很深,以至于你通常见不到它,但它在平日对象和函数对象中都存在,
它的功能正是保存父类的prototype对象,JS在通过new
表明式创立二个指标的时候,常常会把父类的prototype赋值给新指标的__proto__质量,那样,就变成了一代代承继…

function f(){} f.prototype.foo = “abc”; var obj = new f();
console.log(obj.foo); //abc

1
2
3
4
function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc

近些日子大家领略,obj中__proto__保存的是f的prototype,
那么f的prototype中的__proto__中保留的是怎么啊? 看下图:

图片 1

如图所示,f.prototype的__proto__中保存的是Object.prototype,Object.prototype对象中也可能有__proto__,而从出口结果看,Object.prototype.__proto__
是null,表示obj对象原型链的停止。如下图所示:

图片 2

obj对象具有那样叁个原型链未来,当obj.foo试行时,obj会先找找自己是还是不是有该属性,但不会招来本身的prototype,当找不到foo时,obj就沿着原型链依次去查找…

在上头的例证中,我们在f的prototype上定义了foo属性,那时obj就能够在原型链上找到那天性子并施行。

 

提起底,用几句话总计一下本文中提到到的首要:

  1. 原型链的形成真正是靠__proto__
    而非prototype,当JS引擎实践对象的章程时,先找找对象自己是不是留存该格局,固然不设有,会在原型链上查找,但不会搜索自身的prototype。
  2. 二个对象的__proto__笔录着和煦的原型链,决定了自身的数据类型,改换__proto__就等于改造目的的数据类型。
  3. 函数的prototype不属于自己的原型链,它是子类创建的主导,决定了子类的数据类型,是三番五次子类原型链的大桥。
  4. 在原型对象上定义方法和天性的指标是为了被子类承袭和平运动用。

 

2 赞 17 收藏 2
评论

图片 3

大家好,作者是IT修真院德国首都分院第01期学员,一枚正直纯洁善良的web程序猿。

昨天给我们享用一下,修真院官方网站JS(专门的学问)任务4,深度思量中的知识点——JS原型链和做客对象原型的点子

1.介绍

JavaScript 中,万物皆对象。JavaScript依据”原型链”(prototype
chain)格局,来贯彻持续。

2.涉及

2.1对象

JavaScript中,对象是有分别的,分为普通对象和函数对象,Object ,Function
是JS自带的函数对象,function定义方式本质上也许new Function方式。

function  f1(){};

var f2 = function(){};

var f3 = new Function(‘str’,’console.log(str)’);

var o3 = new f1();

var o1 = {};

var o2 =new Object();

console.log(typeof  Object);  //function

console.log(typeof  Function);  //function

console.log(typeof o1);   //object

console.log(typeof o2);   //object

console.log(typeof o3);   //object

console.log(typeof  f1);   //function

console.log(typeof  f2);   //function

console.log(typeof  f3);   //function

2.2对象承继

Brendan
Eich参谋C++和Java,做了简化设计,将new命令引进JavaScript中,new后边跟对象的构造函数,用来创立对象。那样做有个缺欠:无法分享方法和质量。

比方,在DOG对象的构造函数中,设置一个实例对象的共有属性species。

function DOG(name){

this.name = name;

this.species = ‘犬科’;

}

下一场,生成七个实例对象:

var dogA = new DOG(‘大毛’);

var dogB = new DOG(‘二毛’);

这个指标的species属性是独自的,修改当中一个,不会潜移暗化到另八个。

dogA.species = ‘猫科’;

alert(dogB.species); // 显示”犬科”,不受dogA的影响

每叁个实例对象,皆有和好的习性和办法的别本。那不独有无法产生数量分享,也是一点都不小的财富浪费。

Brendan
Eich决定为构造函数设置三个prototype属性。那一个本性包蕴三个对象,全体实例对象急需共享的质量和方法,都位于那一个目的里面;那几个不须求分享的习性和措施,就坐落构造函数里面。实例对象一旦创建,将自行援引prototype对象的性质和方法。也正是说,实例对象的特性和章程,分成二种,一种是地点的,另一种是援引的。

function DOG(name){

this.name = name;

}

DOG.prototype = { species : ‘犬科’ };

var dogA = new DOG(‘大毛’);

var dogB = new DOG(‘二毛’);

alert(dogA.species); // 犬科

alert(dogB.species); // 犬科

species属性放在prototype对象里,是五个实例对象分享的。只要修改了prototype对象,就能够同期影响到多少个实例对象。

DOG.prototype.species = ‘猫科’;

alert(dogA.species); // 猫科

alert(dogB.species); // 猫科

是因为有着的实例对象分享同四个prototype对象,那么从外部看起来,prototype对象就类似是实例对象的原型,而实例对象则临近”承袭”了prototype对象一样。

2.3原型prototype

在JavaScript
中,每当定义多个指标(函数)时候,对象中都会满含部分预订义的个性。在那之中等学校函授数对象的一个属性便是原型对象
prototype。普通对象未有prototype,但有__proto__属性。

示例:

function  f1(){};

console.log(f1. prototype) //f1 {}

console.log(typeof  f1. prototype) //object

console.log(typeof  Function. prototype) // function

console.log(typeof  Object. prototype) // object

console.log(typeof  Function. prototype. prototype) //undefined

2.4 原型链

JS在创立对象(不论是无独有偶对象依然函数对象)的时候,都有三个称作__proto__的放到属性,用于指向创建它的函数对象的原型对象prototype。

var person = function(name){

this.name = name

};

person.prototype.getName = function(){

return this.name;

}

var zjh = new person(‘zhangjiahao’);

zjh.getName(); //zhangjiahao

以地方的例证为例:

console.log(zjh.__proto__ === person.prototype) //true

同样,person.prototype对象也可能有__proto__质量,它指向成立它的函数对象(Object)的prototype

console.log(person.prototype.__proto__ === Object.prototype)
//true

继续,Object.prototype对象也许有__proto__属性,但它比较特别,为null

console.log(Object.prototype.__proto__) //null

我们把那一个有__proto__串起来的停止Object.prototype.__proto__为null的链叫做原型链。

2.5 constructor属性

prototype对象有三个constructor属性,默许指向prototype对象所在的构造函数。

发表评论

电子邮件地址不会被公开。 必填项已用*标注