xml地图|网站地图|网站标签 [设为首页] [加入收藏]

原型对象和原型链,JS原型与原型链终极详解

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:96 发布时间:2019-05-02
摘要:JS主旨体系:浅谈 原型对象和原型链 2016/03/01 · JavaScript· 2 评论 ·原型对象,原型链 原来的文章出处: 一像素    在Javascript中,万物皆对象,但目标也有分别,大概能够分成两类,即

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

f壹属于函数的申明,最广大的函数定义格局,f二实际是二个佚名函数,把这一个佚名函数赋值给了f二,属于函数表明式,f三不常见,但也是1种函数对象。

Function是JS自带的目的,f一,f二在创造的时候,JS会自动通过new Function()的办法来塑造这么些目的,由此,那四个目的都以因此new Function()创立的。

在Javascript中创立对象有二种情势:对象字面量和平运动用new表达式,o一和o②的创造恰好对应了那三种办法,珍视讲一下o3, 假如用Java和C#的笔触来领悟的话,o三是f1的实例对象,o三和f壹是平等档案的次序,至少笔者原先这么感到,其实不然…

那正是说怎么通晓呢? 很轻便,看o三是或不是经过new Function爆发的, 分明不是,既然不是函数对象,那正是平日对象 。

经过对函数对象和一般性对象的不难了然之后,大家再来领会一下Javascript中的原型和原型链:

在JS中,每当创制三个函数对象f一时,该目的中都会安置一些性质,当中包罗prototype和__proto__,  prototype即原型对象,它记录着f1的部分性质和艺术。

亟待专注的是,prototype 对f一是不可见的,也等于说,f一不会寻觅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中的属性和形式。

想要知道f一是什么把prototype留给“后代”,大家需求了然一下JS中的原型链,此时,JS中的 __proto__ 上台了,那汉子长的很奇特,隐藏的也很深,以至于你日常见不到它,但它在平凡对象和函数对象中都设有, 它的成效正是保存父类的prototype对象,JS在经过new 表明式创立3个目的的时候,平时会把父类的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修真院德国首都分院第0一期学员,一枚正直纯洁善良的web程序猿。

壹. 常备对象与函数对象

前天给大家分享一下,修真院官方网址JS(专门的学业)职责四,深度思考中的知识点——JS原型链和访问对象原型的秘诀

  JavaScript 中,万物皆对象!但目标也是有分其余。分为普通对象和函数对象,Object ,Function 是JS自带的函数对象。上边比方表达

1.介绍

 function f1(){};
 var f2 = function(){};
 var f3 = new Function('str','console.log(str)');

JavaScript 中,万物皆对象。JavaScript依照"原型链"(prototype chain)方式,来兑现接二连三。

 var o3 = new f1();
 var o1 = {};
 var o2 =new Object();

2.涉及

 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.1对象

 

JavaScript中,对象是有分其余,分为普通对象和函数对象,Object ,Function 是JS自带的函数对象,function定义方式本质上仍旧new Function格局。

在上头的例子中 o壹 o二 o3 为普通对象,f一 f二 f三为函数对象。怎么差距,其实很简短,凡是通过 new Function() 创造的目的都以函数对象,其余的都是普普通通对象。f一,f二,归根结蒂都以通过 new Function()的方法开始展览创办的。Function Object 也都以经过 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. 原型对象

二.二对象承继

   在JavaScript 中,每当定义一个对象(函数)时候,对象中都会蕴藏部分预约义的品质。当中等高校函授数对象的一特性质正是原型对象 prototype。注:普通对象未有prototype,但有__proto__属性。

Brendan Eich参考C 和Java,做了简化设计,将new命令引入JavaScript中,new前边跟对象的构造函数,用来创造对象。那样做有个毛病:不能共享方法和属性。

  原型对象实际便是普通对象(Function.prototype除此之外,它是函数对象,但它很尤其,他一向不prototype属性(前边说道函数对象都有prototype属性))。看上面包车型大巴事例:
 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

譬如,在DOG对象的构造函数中,设置1个实例对象的共有属性species。

function DOG(name){

this.name = name;

this.species = '犬科';

}

然后,生成三个实例对象:

var dogA = new DOG('大毛');

var dogB = new DOG('二毛');

那四个对象的species属性是单身的,修改当中二个,不会潜移默化到另3个。

dogA.species = '猫科';

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

每1个实例对象,都有投机的习性和章程的别本。那不仅不可能变成数量共享,也是特大的财富浪费。

 从那句console.log(f1.prototype) //f一 {} 的出口就结果能够看到,f壹.prototype便是f1的2个实例对象。正是在f1创造的时候,制造了二个它的实例对象并赋值给它的prototype,基本进度如下:
 var temp = new f1();
 f1. prototype = temp;

Brendan Eich决定为构造函数设置1个prototype属性。那性格子包罗二个目的,全数实例对象急需共享的质量和章程,都位于那个目标里面;那多少个不供给共享的习性和措施,就放在构造函数里面。实例对象1旦创制,将机关引用prototype对象的属性和格局。也等于说,实例对象的性能和方法,分成三种,1种是本地的,另一种是援引的。

  所以,Function.prototype为啥是函数对象就一下子就解决了了,上文提到凡是new Function ()发生的靶子都以函数对象,所以temp1是函数对象。
 var temp1 = new Function ();
 Function.prototype = temp1;

function DOG(name){

this.name = name;

}

DOG.prototype = { species : '犬科' };

var dogA = new DOG('大毛');

var dogB = new DOG('二毛');

alert(dogA.species); // 犬科

alert(dogB.species); // 犬科

那原型对象是用来做哪些的吧?重要成效是用来后续。举了例子:
  var person = function(name){
   this.name = name
  };
  person.prototype.getName = function(){
     return this.name; 
  }
  var zjh = new person(‘zhangjiahao’);
  zjh.getName(); //zhangjiahao

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

   从这些事例能够见见,通过给person.prototype设置了多少个函数对象的属性,那有person实例(例中:zjh)出来的常备对象就一连了那脾性子。具体是怎么落到实处的延续,将在讲到下边包车型客车原型链了。

DOG.prototype.species = '猫科';

alert(dogA.species); // 猫科

alert(dogB.species); // 猫科

三.原型链

鉴于全体的实例对象共享同八个prototype对象,那么从外边看起来,prototype对象就像是实例对象的原型,而实例对象则接近"承继"了prototype对象同样。

   JS在创立对象(不论是平凡对象依然函数对象)的时候,都有三个称呼__proto__的放手属性,用于指向创建它的函数对象的原型对象prototype。以地点的例子为例:

2.3原型prototype

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

在JavaScript 中,每当定义二个目的(函数)时候,对象中都会包蕴部分预订义的特性。当中等学校函授数对象的2个性能正是原型对象 prototype。普通对象未有prototype,但有__proto__属性。

平等,person.prototype对象也有__proto__属性,它指向创制它的函数对象(Object)的prototype

示例:

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

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

2.4 原型链

承袭,Object.prototype对象也有__proto__性能,但它相比较越发,为null

JS在成立对象(不论是常见对象如故函数对象)的时候,都有一个号称__proto__的放置属性,用于指向成立它的函数对象的原型对象prototype。

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

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:原型对象和原型链,JS原型与原型链终极详解

关键词: JavaScript 68399皇家赌场 IT修真院-前端 IT修真院-前

上一篇:理解JavaScript的原型属性,的原型属性

下一篇:没有了

最火资讯