JS原型链和访问对象原型的方法

2019-12-02 06:20栏目:龙电竞官网
TAG:

JavaScript 深切之从原型到原型链

2017/05/04 · JavaScript · 原型, 原型链

原稿出处: 冴羽   

【JS-05】原型链和拜谒对象原型的点子

世家好,小编是IT修真院蒙特利尔分院第01期学员,风姿洒脱枚正直纯洁和善的web工程师。

布局函数成立对象

我们先使用结构函数成立二个目的:

function Person() { } var person = new Person(); person.name = 'name'; console.log(person.name) // name

1
2
3
4
5
6
function Person() {
 
}
var person = new Person();
person.name = 'name';
console.log(person.name) // name

在此个例子中,Person正是三个布局函数,我们利用new创制了二个实例对象person。

极粗略吗,接下去踏向正题:

小课堂【武汉第170期】

后天给大家坐卧不宁一下,修真院官方网址JS(职业)任务4,深度思虑中的知识点——JS原型链和做客对象原型的主意

prototype

每一种函数都有二个prototype属性,正是大家平时在各样例子中看看的不得了prototype,例如:

function Person(卡塔尔(英语:State of Qatar) { } // 即使写在疏解里,不过你要小心: // prototype是函数才会有的属性 Person.prototype.name = 'name'; var person1 = new Person(卡塔尔; var person2 = new Person(卡塔尔(قطر‎; console.log(person1.name卡塔尔 // name console.log(person2.name卡塔尔(قطر‎ // name

1
2
3
4
5
6
7
8
9
10
function Person() {
 
}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'name';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // name
console.log(person2.name) // name

那那些函数的prototype属性到底指向的是如何吗?是那一个函数的原型吗?

实际,函数的prototype属性指向了八个对象,这几个目标便是调用该构造函数而创造的实例的原型,也正是以这件事例中的person1和person2的原型。

那么如何是原型呢?你能够这么敞亮:每一个JavaScript对象(null除却卡塔尔国在创立的时候就能够与之提到另贰个指标,这些目的正是大家所说的原型,每多少个对象都会从原型”世袭”属性。

让大家用一张图表示布局函数和实例原型之间的关系:

图片 1

在此张图中我们用Object.prototype表示实例原型

那么大家该怎么表示实例与实例原型,相当于person和Person.prototype之间的关联吧,这时大家将要讲到首个天性:

分享人:庄引

1.介绍

__proto__

那是每贰个JavaScript对象(除了null卡塔尔国都存有的贰性子能,叫__proto__,那性情情会指向该指标的原型。

为了表明那一点,大家得以在火狐或许Google中输入:

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

1
2
3
4
5
function Person() {
 
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); //true

于是乎大家立异下关系图:

图片 2

既是实例对象和布局函数都足以本着原型,那么原型是不是有品质指向构造函数恐怕实例呢?

目录

JavaScript 中,万物皆对象。JavaScript依照"原型链"(prototype chain)形式,来得以实现持续。

constructor

针对实例倒是未有,因为多少个结构函数能够扭转两个实例,然则原型指向布局函数倒是有个别,这就要讲到第多少个属性:construcotr,种种原型都有三个constructor属性指向关联的布局函数

为了印证那或多或少,我们能够品尝:

function Person() { } console.log(Person === Person.prototype.constructor); //true

1
2
3
4
function Person() {
 
}
console.log(Person === Person.prototype.constructor); //true

所以再立异下关系图:

图片 3

综上大家曾经得出:

function Person() { } var person = new Person(); console.log(person.__proto__ == Person.prototype卡塔尔(قطر‎ // true console.log(Person.prototype.constructor == Person卡塔尔(英语:State of Qatar) // true // 顺便学习贰个ES5的措施,能够获得对象的原型 console.log(Object.getPrototypeOf(person卡塔尔 === Person.prototype卡塔尔(英语:State of Qatar) //true

1
2
3
4
5
6
7
8
9
function Person() {
}
 
var person = new Person();
 
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) //true

摸底了布局函数、实例原型、和实例之间的关系,接下去大家讲讲实例和原型的涉嫌:

1.背景介绍

2.涉及

实例与原型

当读取实例的性质时,假设找不到,就能够招来与指标关联的原型中的属性,如果还查不到,就去找原型的原型,平昔找到最顶层截止。

例如:

function Person() { } Person.prototype.name = 'name'; var person = new Person(); person.name = 'name of this person'; console.log(person.name) // name of this person delete person.name; console.log(person.name) // name

1
2
3
4
5
6
7
8
9
10
11
12
13
function Person() {
 
}
 
Person.prototype.name = 'name';
 
var person = new Person();
 
person.name = 'name of this person';
console.log(person.name) // name of this person
 
delete person.name;
console.log(person.name) // name

在此个例子中,咱们设置了person的name属性,所以大家能够读取到为’name of this

2.文化解析

2.1对象

person’,当我们删除了person的name属性时,读取person.name,从person中找不到就能够从person的原型也正是person.__proto__

Person.prototype中搜索,幸运的是我们找到了为’name’,可是假诺还还未找到呢?原型的原型又是何许呢?

在日前,大家曾经讲了原型也是叁个指标,既然是指标,大家就能够用最原始的诀窍创造它,这正是

var obj = new Object(); obj.name = 'name' console.log(obj.name) // name

1
2
3
var obj = new Object();
obj.name = 'name'
console.log(obj.name) // name

之所以原型对象是透过Object布局函数生成的,结合此前所讲,实例的__proto__指向布局函数的prototype,所以我们再立异下关系图:

图片 4

3.大规模难点

JavaScript中,对象是有分其他,分为日常对象和函数对象,Object ,Function 是JS自带的函数对象,function定义方式本质上恐怕new Function形式。

原型链

那Object.prototype的原型呢?

null,嗯,就是null,所以查到Object.prototype就足以告后生可畏段落查找了

于是最后一张关系图正是

图片 5

附带还要说一下,图中由相互关系的原型组成的链状构造就是原型链,也正是玉芙蓉红的那条线。

4.技术方案

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

补充

末尾,补充和改过本文中有的不严慎之处:

首先是constructor,

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

1
2
3
4
5
function Person() {
 
}
var person = new Person();
console.log(person.constructor === Person); // true

当拿到person.constructor时,其实person中并从未constructor属性,当无法读取到constructor属性时,会从person的原型相当于Person.prototype中读取,正巧原型中有该属性,所以

person.constructor === Person.prototype.constructor

1
person.constructor === Person.prototype.constructor

其次是__proto__, 绝超越50%浏览器都帮助这一个非标准的艺术访问原型,可是它并空头支票与Person.prototype中,实际上,它是发源于Object.prototype,与其说是壹性格能,不及说是多少个getter/setter,当使用obj.__proto__时,能够精晓成归来了Object.getPrototypeOf(obj卡塔尔(英语:State of Qatar)

谈到底是有关后续,前边我们讲到“每叁个对象都会从原型”世襲”属性”,实际上,世襲是贰个格外全体吸引性的传道,引用《你不知底的JavaScript》中的话,正是:世襲意味着复制操作,但是JavaScript默许并不会复制对象的品质,相反,JavaScript只是在多个指标之间创设叁个涉嫌,那样,一个对象就能够透过委托访谈另叁个指标的性情和函数,所以与其叫接轨,委托的说教反而更加准确些。

5.编码实战

2.2对象继承

深深类别

JavaScript深切种类估计写十二篇左右,意在帮我们捋顺JavaScript底层知识,注重批注如原型、功效域、试行上下文、变量对象、this、闭包、按值传递、call、apply、bind、new、袭承等难点概念,与罗列它们的用法分化,那个连串更偏重通过写demo,捋进程、模拟实现,结合ES标准等措施来上课。

不无文章和demo都能够在github上找到。假使有不当只怕不严谨之处,请必须给与指正,十一分感谢。假诺合意还是具有启示,款待star,对小编也是风姿洒脱种鞭挞。

1 赞 3 收藏 评论

图片 6

6.扩充考虑

Brendan Eich参谋C++和Java,做了简化设计,将new命令引进JavaScript中,new后边跟对象的结构函数,用来创制对象。这样做有个毛病:不能够分享方法和属性。

7.参考文献

举个例子,在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的影响

每三个实例对象,皆有友好的性质和办法的别本。那不唯有不可能成功数量共享,也是高大的财富浪费。

8.越多商量

Brendan Eich决定为布局函数设置一个prototype属性。这几个性情包涵三个对象,全数实例对象急需共享的天性和办法,都放在这里个目的里面;那一个不需求分享的质量和措施,就放在布局函数里面。实例对象大器晚成旦创设,将自动援用prototype对象的习性和格局。也正是说,实例对象的天性和方法,分成二种,一种是地点的,另风姿洒脱种是援用的。

1.背景介绍

function DOG(name){

this.name = name;

}

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

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

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

alert(dogA.species); // 犬科

alert(dogB.species); // 犬科

JavaScript本身不提供类达成。 (在ES二零一五/ES6中引进了class关键字,不过只是语法糖,JavaScript 仍为根据原型的卡塔尔。 通过原型这种体制,JavaScript 中的对象从其余对象世襲作用特色。当聊起后续时,Javascript 唯有生龙活虎种构造:对象。每种对象都有贰个里头链接到另一个目的, 称为它的原型 prototype。该原型对象有和好的原型,等等,直到达到叁个以null为原型的目的。 依照定义,null未有原型,何况作为那些原型链prototype chain中的最后链接。那么原型链怎样职业? prototype 属性怎么着向已部布满局器增添方法?

species属性放在prototype对象里,是四个实例对象分享的。只要纠正了prototype对象,就能够同不平日间影响到两个实例对象。

2.文化剖判

DOG.prototype.species = '猫科';

alert(dogA.species); // 猫科

alert(dogB.species); // 猫科

概念布局函数,通过NEW来创造对象实例?

是因为有着的实例对象分享同四个prototype对象,那么从外侧看起来,prototype对象就就好像是实例对象的原型,而实例对象则接近"世袭"了prototype对象同样。

functionPerson() {

2.3原型prototype

}

在JavaScript 中,每当定义三个目的(函数)时候,对象中都会蕴藏部分预约义的属性。当中等学园函授数对象的多性子格便是原型对象 prototype。普通对象未有prototype,但有__proto__属性。

varperson= newPerson();

示例:

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

person.name = 'Andy';

2.4 原型链

console.log(person.name) // Andy

JS在创设对象(无论是平日对象依然函数对象)的时候,皆有一个称作__proto__的停放属性,用于指向创设它的函数对象的原型对象prototype。

在此个事例中,Person就是一个布局函数,大家选择 new 创造了三个实例对象person。

var person = function(name){

this.name = name

};

person.prototype.getName = function(){

return this.name;

}

var zjh = new person(‘zhangjiahao’);

zjh.getName(); //zhangjiahao

构造函数的 PROTOTYPE 属性指向实例原型?

以地点的例证为例:

每种函数都有一个 prototype 属性,就是大家日常在各个例子中看出的那多少个prototype ,例如:

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

functionPerson() {

同等,person.prototype对象也许有__proto__品质,它指向创设它的函数对象(Object)的prototype

}

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

// 注意: prototype是函数才会有个别属性

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

Person.prototype.name = 'Andy';

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

varperson1 = newPerson();

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

varperson2 = newPerson();

2.5 constructor属性

console.log(person1.name) // Andy

prototype对象有贰个constructor属性,暗中同意指向prototype对象所在的构造函数。

console.log(person2.name) // Andy

出于constructor属性定义在prototype对象方面,意味着能够被全数实例对象世襲。

那构造函数的prototype属性到底指向的是怎么啊?是其意气风发函数的原型吗? 其实,函数的prototype属性指向了二个指标,这些目的正是调用该布局函数而创办的 实例的原型,也正是其一事例中的person1和person2的原型。 那么什么样是原型呢? 每贰个JavaScript对象(null除了这几个之外卡塔尔国在开创的时候就能够与之提到另二个指标,这些目的正是大家所说的原型,每七个对象都会从原型"世袭"属性。

constructor属性的效应,是可辨原型对象到底归属哪个结构函数。

在此张图中我们用Person.prototype 表示实例原型 那么我们该怎么表示实例与实例原型,也正是person和Person.prototype 之间的涉嫌啊,此时我们就要讲到第一脾特性:

2.6 总结

对象的 __PROTO__ 属性指向实例原型

1.原型和原型链是JS落成持续的风流倜傥种模型。

那是每二个JavaScript对象(除了null)都具备的二个属性,叫__proto__,那个天性会指向该目的的原型。

2.原型链的变异是确实是靠__proto__ 而非prototype。

functionPerson() {

3.大规模难点

}

做客对象原型的法子有啥?

varperson= newPerson();

4.缓和措施

console.log(person.__proto__ ===Person.prototype);     //true?

获取实例对象obj的原型对象,有两种办法:

既然如此实例对象和布局函数都足以针对原型,那么原型是或不是有总体性指向布局函数也许实例呢?

  1. obj.__proto__

  2. obj.constructor.prototype

  3. Object.getPrototypeOf(obj)

实例原型的 CONSTRUCTO瑞鹰 属性指向布局函数?

地点两种形式之中,前三种都不是很可信赖。最新的ES6规范规定,__proto__品质唯有浏览器才须要安顿,别的条件能够不计划。而obj.constructor.prototype在手动改换原型对象时,恐怕会失效。

针对实例是不容许的,因为三个结构函数能够扭转四个实例,然则原型指向布局函数倒是有个别,种种原型都有二个constructor属性指向关联的布局函数:

5.编码实战

functionPerson() {

6.扩张思虑

}

1.Object.__proto__ === Function.prototype // true

2.Function.__proto__ === Function.prototype // true

3.Function.prototype.__proto__ === Object.prototype //true

版权声明:本文由龙竞技官网发布于龙电竞官网,转载请注明出处:JS原型链和访问对象原型的方法