深入之从原型到原型链,JavaScript深入之从原型到原型链

JavaScript 深刻之从原型到原型链

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

初稿出处: 冴羽   

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

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

构造函数创制对象

我们先利用构造函数创立2个指标:

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

在那一个例子中,Person就是一个构造函数,我们利用new创造了1个实例对象person。

非常粗大略吗,接下去进入正题:

构造函数创设对象

咱俩先采用构造函数创立二个指标:

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

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

摘要精晓:

虽人微权轻,但也要有本身的情态。

prototype

各种函数都有3个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属性指向了一个指标,那几个指标正是调用该构造函数而创办的实例的原型,也正是以此例子中的person1和person2的原型。

那什么是原型呢?你可以这么通晓:每个JavaScript对象(NULL除外)在创制的时候就会与之提到另1个对象,那些目的就是我们所说的原型,每三个指标都会从原型“继承”属性。

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

图片 1

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

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

prototype

种种函数都有贰个prototype属性,正是我们平常在各个例子中观察标老大prototype,比如:

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

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的原型。

那么哪些是原型呢?你能够这么敞亮:每3个JavaScript对象(null除外)在成立的时候就会与之提到另三个对象,那个指标就是我们所说的原型,每多少个对象都会从原型”继承”属性。

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

图片 2

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

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

prototype:

每一种函数都有二个 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除外)在成立的时候就会与之提到另一个指标,那么些目的正是我们所说的原型,每1个对象都会从原型”继承”属性。

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

proto

那是每1个JavaScript对象(出了NULL)都具有的贰天质量,叫
proto,这一个天性会指向该指标的原型。

为了表达那点,大家能够再火狐可能谷歌(Google)浏览器中输入:

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

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

相关文章