原型,原型链,call/apply

JavaScript从初级往高级走系列————prototype

原型

定义: 原型是function对象的一个属性,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。

用一张图简单解释一下定义。

  1. 每个函数上面都有一个原型属性(prototype),这个属性会指向构造函数的原型对象(Person.prototype)
  2. 每个函数的原型对象(Person.protorype)默认都有一个constructor属性指向构造函数本身(Person)
  3. 每个实例都有一个隐式原型(proto)指向构造函数的原型对象(Person.prototype)
  4. 每个原型对象也有隐式原型(proto)
1
2
3
4
5
6
7
8
9
10
11
// 构造函数
function Person() {
this.LastName = 'zhang'
}
// Person.prototype --- 原型 (自带的,当定义了构造函数,它就孕育而生了)
// Person.prototype = {} --- 原型对象 是祖先
Person.prototype.name = 'xiaoming';
var person = new Person()
var person1 = new Person()
console.log(person.name); // xiaoming (它自己没有,就会到原型(祖先)上去找)
console.log(person1.LastName); // zhang (它自己有,就会取自身的)

constructor

1
2
3
4
5
function Person() {
}
var person = new Person()
console.log(person.constructor) // function Person() {}
// person自己没有constructor,所以继承至原型

Person.prototype:

图中浅紫色的都是自带的

1
2
3
4
5
6
7
function Person() {
}
function Car() {
}
Person.prototype.constructor = Car; // 改变constructor
var person = new Person()
console.log(person.constructor) // function Car() {}

proto

1
2
3
4
5
6
7
// __proto__
function Person() {

}
Person.prototype.name = 'zhangsan'
var person = new Person()
console.log(person.__proto__)

new

New的过程

  1. 声明一个中间对象
  2. 将中间对象的原型指向构造函数的原型
  3. 将构造函数的this指向中间对象
  4. 返回中间对象,即实例对象

JavaScript —— New

1
2
3
4
5
6
7
8
9
function DNew() {
// var obj = {}; // var obj = new Object() 创建一个空对象
// var obj = Object.create(null);
Constructor = [].shift.call(arguments); // 获取第一个参数即构造函数
// obj.__proto__ = Constructor.prototype;
var obj = Object.create(Constructor.prototype);
var result = Constructor.apply(obj, arguments);
return typeof result === 'object' ? result || obj : obj; // 返回对象
}
1
2
3
4
5
6
在通过new 一个实例对象时:
function Person() {
var this = {
__proto__ : Person.prototype
}
}

person.__proto__Person.prototype是指向同一个内存地址,这也就是 为什么实例没有属性或方法会到原型上去查找

1
2
3
4
5
6
7
function Person() {

}
Person.prototype.name = 'zhangsan'
var person = new Person()
Person.prototype.name = 'lisi'
console.log(person.name) // ???
1
2
3
4
5
6
7
8
9
function Person() {

}
Person.prototype.name = 'zhangsan'
var person = new Person()
Person.prototype = {
name : 'lisi'
}
console.log(person.name) // ???

原型链

先扔一张图:

1
Person.prototype.__proto__ : Object.prototype

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Grand() {

}
Grand.prototype.lastName = "zhang"
var grand = new Grand()

function Father() {

}
Father.prototype = grand // Father的原型指向grand对象
var father = new Father()

function Son() {

}
Son.prototype = father // Son的原型指向father
var son = new Son()

上图中红线表示的就是原型链了

Object.create()

1
2
3
4
5
6
7
// Object.create(原型)
var obj = {name: 'zhang',age: 23}
var obj1 = Object.create(obj)

Person.prototype.name = 'zhang'
function Person() {}
var person = Object.create(Person.prototype)

Object.create(null),null就是一个空对象,没有原型。这也是·typeof null == ‘object’的原因

toString

undefinednull没有toString()

1
2
3
4
5
6
7
8
9
10
true.toString()

'abc'.toString()

var num = 123
num.toString()
// 123.toString() 试一试会怎样

var obj = {}
obj.toString() // "[object Object]"

toString来自哪??

1
2
3
4
5
6
var num = 123
// num.toString(); --> new Number(num).toString()
// Number重写 toString
Number.prototype.toString = function() {}

// Number.prototype.__proto__ = Object.prototype

1
2
3
4
5
6
7
8
9
10
11
12
function Person(){}
Person.prototype.toString = function () {
return '重写toString'
}
var person = new Person()
person.toString() // '重写toString'

// Object.prototype.toString
// Number.prototype.toString
// Array.prototype.toString
// Boolean.prototype.toString
// String.prototype.toString

toString隐藏功能:判断变量、对象的类型

call/apply

1
2
3
4
5
6
7
8
function Person(name, age) {
this.name = name
this.age = age
}
var person = new Person('zhang', 23)
var obj = {}
Person.call(obj,'wang',30) // this指向obj
// obj = {age:30,name:"wang"}

call/apply不仅改变了this的指向,还会执行对应的方法

1
2
3
4
5
6
7
8
9
10
11
var cat = {
name: '咪咪'
}
function beatTheMonster(){
console.log(this.name);
}
beatTheMonster.call(cat);

// 1.call 改变了this的指向。改变到了cat上。
// 2.beatTheMonster函数/方法执行了
// 3.bind(),保存了方法,并没有直接调用它

最后

创建了一个前端学习交流群,感兴趣的朋友,一起来嗨呀!

如果我的文章对您有帮助!有钱的捧个钱场,没钱的捧个人场,谢谢您!
0%