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

JS原型链和访问对象原型的方法,深入之从原型到

来源:http://www.ccidsi.com 作者:集成经验 人气:107 发布时间:2019-05-02
摘要:JavaScript 深切之从原型到原型链 2017/05/04 · JavaScript· 原型,原型链 原稿出处: 冴羽    【JS-0伍】原型链和做客对象原型的章程 我们好,我是IT修真院温哥华分院第0一期学员,1枚正直纯

JavaScript 深切之从原型到原型链

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

原稿出处: 冴羽   

【JS-0伍】原型链和做客对象原型的章程

我们好,我是IT修真院温哥华分院第0一期学员,1枚正直纯洁善良的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(职业)职责四,深度思索中的知识点——JS原型链和做客对象原型的秘技

prototype

每种函数都有三个prototype属性,正是我们平常在各样例子中见到的不行prototype,举例:

function Person() { } // 纵然写在讲授里,但是你要注意: // prototype是函数才会有的属性 Person.prototype.name = 'name'; var person一= new Person(); var person二 = new Person(); console.log(person一.name) // name console.log(person二.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属性指向了一个目的,那些目的就是调用该构造函数而创办的实例的原型,也等于以此例子中的person一和person二的原型。

那正是说怎么样是原型呢?你能够如此敞亮:每1个JavaScript对象(null除此之外)在创立的时候就能够与之提到另贰个对象,那个目的正是大家所说的原型,每三个对象都会从原型”承袭”属性。

让大家用一张图表示构造函数和实例原型之间的关联:

皇家国际娱乐中心 1

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

那正是说大家该怎么表示实例与实例原型,也正是person和Person.prototype之间的关系吧,这时候大家将要讲到第贰个属性:

分享人:庄引

1.介绍

__proto__

那是每一个JavaScript对象(除了null)都存有的1个属性,叫__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) // true // 顺便学习叁个ES5的方法,能够赢得对象的原型 console.log(Object.getPrototypeOf(person) === Person.prototype) //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

询问了构造函数、实例原型、和实例之间的涉及,接下去大家讲讲实例和原型的关联:

一.背景介绍

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