JavaScript 深刻之从原型到原型链

2017/05/04 · JavaScript
· JavaScript深入之从原型到原型链,深入之从原型到原型链。原型,
原型链

初稿出处: 冴羽   

构造函数成立对象

大家先使用构造函数创设三个对象:

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

在这几个例子中,Person就是五个构造函数,我们利用new创设了四个实例对象person。

很简单吗,接下去进入正题:

已离开简书,原因参见
http://www.jianshu.com/p/0f12350a6b66。

转载自:冴羽JavaScript深刻之从原型到原型链

构造函数创立对象

大家先利用构造函数成立3个目的:

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便是3个构造函数,大家利用new创设了一个实例对象person。

极粗略吗,接下去进入正题:

prototype

各样函数都有三个prototype属性,即是大家平常在各样例子中看到的分外prototype,举个例子:

function Person(){}

//注意! prototype是函数才会有的属性

Person.prototype.name = 'Kevin';
var person1 = new Person();
var perosn2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那这些函数的prototype属性到底指向的是哪些吗?是以此函数的原型吗?

其实,函数的prototype属性指向了叁个目的,那个目的就是调用该构造函数而创办的实例的原型,也等于以此例子中的person一和person二的原型。

那什么是原型呢?你能够如此通晓:每一个JavaScript对象(NULL除此之外)在开创的时候就会与之提到另三个目标,那么些目的正是大家所说的原型,每一个目的都会从原型“承袭”属性。

让我们用一张图表示构造函数和实例原型之间的涉嫌:

图片 1

在那张图中大家用 Object.prototype表示实例原型。

那正是说大家该怎么表示实例与实例原型,也正是person和Person.prototype之间的涉嫌啊?那时大家将要讲到第二性格子:

虽卑不足道,但也要有本人的态势。

摘要明白:

prototype

种种函数都有叁个prototype属性,就是我们平日在各类例子中见到的13分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二的原型。

那就是说什么样是原型呢?你能够这样敞亮:每2个JavaScript对象(null除此而外)在开创的时候就会与之提到另一个对象,这几个目标正是我们所说的原型,每贰个对象都会从原型”承接”属性。

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

图片 2

在那张图中大家用Object.prototype表示实例原型

那正是说大家该怎么表示实例与实例原型,也便是person和Person.prototype之间的关联呢,那时候大家就要讲到第一个个性:

proto

那是每3个JavaScript对象(出了NULL)都具有的贰个属性,叫
proto,这么些天性会指向该目标的原型。

为了表明那点,大家能够再火狐恐怕谷歌浏览器中输入:

function Person(){}
var person = new Person();
console.log(Person.prototype === person.__proto__) // 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

摸底了构造函数、实例原型、和实例之间的关系,接下去我们讲讲实例和原型的涉嫌:

小说能够在本身的 Github
https://github.com/mqyqingfeng/Blog
查看

prototype:

各类函数都有1个 prototype 属性,正是大家通常在各类例子中看到的可怜
prototype

function Person() {

}
// 虽然写在注释里,但是你要注意:
// prototype是函数才会有的属性
Person.prototype.name = 'Kevin';
var person1 = new Person();
var person2 = new Person();
console.log(person1.name) // Kevin
console.log(person2.name) // Kevin

那什么样是原型呢?你能够这么精晓:每二个JavaScript对象(null除此而外)在创制的时候就会与之提到另三个对象,那一个目的正是大家所说的原型,每2个目标都会从原型”承继”属性。

网站地图xml地图