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

JavaScript 深远之从原型到原型链

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

初稿出处: 冴羽深入之从原型到原型链,JavaScript深入之从原型到原型链。   

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

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

构造函数创制对象

咱俩先采纳构造函数创设3个对象:

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

在那几个事例中,Person正是叁个构造函数,大家选拔new创造了2个实例对象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便是一个构造函数,大家应用new创造了三个实例对象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属性指向了三个指标,这些目的即是调用该构造函数而创办的实例的原型,也正是以此例子中的person一和person贰的原型。

那怎么是原型呢?你能够如此敞亮:每1个JavaScript对象(NULL除却)在创建的时候就会与之提到另3个目的,那些指标正是我们所说的原型,每一个对象都会从原型“继承”属性。

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

图片 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(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属性指向了二个指标,那些目的就是调用该构造函数而创造的实例的原型,也正是那些例子中的person1和person贰的原型。

那正是说怎样是原型呢?你能够如此精通:每三个JavaScript对象(null除却)在成立的时候就会与之提到另3个对象,这几个目的便是我们所说的原型,每2个目的都会从原型”继承”属性。

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

图片 2

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

那么大家该怎么表示实例与实例原型,也等于person和Person.prototype之间的关联呢,那时候咱们就要讲到第四个性情:

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

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

那什么是原型呢?你能够那样掌握:每1个JavaScript对象(null除了那些之外)在开创的时候就会与之提到另3个对象,那一个指标便是大家所说的原型,每三个目的都会从原型”继承”属性。

proto

那是每三个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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图