JavaScript原型与原型链

原型与原型链

  • 原型
  • 显式原型与隐式原型
  • 原型链

原型

我们创建的每个函数都有一个 prototype(原型) 属性,这个属性是一个指向一个对象的指针,这个对象的用途是存储由该函数实例化出的所有对象所共享的属性和方法。

在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数) 属性,这个属性是一个指向 prototype 属性所在函数的指针

举个例子,如下代码:

func Person() {
	Person.prototype.name = "jack"
	Person.prototype.age = 18
	Person.prototype.sayHello = function() {
		alert("Hello!")
	}
}

var person1 = new Person()
var person2 = new Person()

此时,构造函数为空,我们将所有的属性和方法都放在了 Person 的 prototype 属性中。但是我们依然可以调用构造函数创建新对象,并且新对象都会具有相同的属性和方法。但与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。

理解参见下图:
JavaScript原型与原型链_第1张图片

显式原型与隐式原型

每个函数 function都有一个 prototype,即显示原型, 每个实例对象都有一个 _proto_,即隐式原型, 对象得隐式原型的值为其对应构造函数的现实原型的值。

函数 prototype 属性:在定义函数时自动添加,默认是一个空 object 对象。
对象得 _proto_ 属性:在创建对象时自动添加的,默认值为构造函数的 prototype 属性值
程序员能直接操作显示原型,但不能直接操作隐式原型(ES6之前)

显示原型和隐式原型的介绍如上,详细作用与理解参见原型链

原型链

有如下代码:

function Fn() {
	this.test1 = function() {
		console.log("test1")
	}
}

Fn.prototype.test2 = function() {
	console.log("test2")
}

var fn = new Fn()

Fn是一个构造函数,然后构造了 fn对象,但是在对象构造之前内存中已经有了一个 object 对象。所以原型链如下:
JavaScript原型与原型链_第2张图片

解释原型链:
访问一个对象得属性时,先在自身属性中查找,找到返回,如果没有,再沿着_proto_ 这条链向上查找,找到返回,如果最终没有找到,返回 undefined

别名:隐式原型链

作用:查找对象的属性

最后贴一张 普通函数、object对象、Function对象之间的原型链,可参考可研究
JavaScript原型与原型链_第3张图片

你可能感兴趣的:(前端,JavaScript)