简述js原型链

基本概念

1.、js的对象可以分为函数对象和普通对象,每个对象都有proto属性,但是只有函数对象才有prototype属性(prototype=原型对象)

2、Object是*的函数对象,Function、Array、RegExp、Date、Boolean、Number、String等等是第二高级的函数对象,我们自己手写的function是再低一级的函数对象

3、proto是一个对象,它指向某一个prototype,并且有2个属性:constructor和proto

原型链的作用

1、共享属性(面向开发者)

先来看第一种写法

function Person(name) {
    this.name = name
}

var p1 = new Person(‘x‘)
p1.sayName =  function() {
    console.log(this.name)
}

var p2 = new Person(‘y‘)
p2.sayName =  function() {
    console.log(this.name)
}

我们声明了一个构造函数Person,并为它的2个实例都定义了sayName方法

如果我们希望所有的实例都有sayName方法,减少重复的定义

可以像下面这么写:(第二种写法)

function Person(name) {
    this.name = name
    this.sayName() = function() {
        console.log(this.name)
	}
}

var p1 = new Person(‘x‘)
var p2 = new Person(‘y‘)

我们在构造函数Person中定义了一个数据成员和一个函数成员

每当我们创造一个新的Person实例时,都会在内存中单独为它分配私有的空间

也就是说,p1和p2都有自己的name属性和sayName方法

这个name属性和sayName方法是实例自己私有的

在控制台直接打印p1得到如下结果:(第一、第二种写法是等价的)

简述js原型链

再来看第三种写法:

function Person(name) {
    this.name = name
}

Person.prototype.sayName = function(){
    console.log(this.name)
}

var p1 = new Person(‘x‘)
var p2 = new Person(‘y‘)

这样的话,每个Person实例依然都会有name属性和sayName方法

不同的地方在哪呢?

在控制台直接打印p1得到如下结果:

简述js原型链

不难发现,当前这种写法是将sayName定义在Person的原型对象上的

也就是说,sayName方法不再是每个Person实例私有的,而是所有Person实例共享的

这样做 既不影响每个实例打印/输出自己的name值,又可以节省内存

2、面向编译器

function Person(name) {
    this.name = name
}

Person.prototype.sayName = function(){
    console.log(this.name)
}

var p1 = new Person(‘x‘)
p1.sayName()

还是相同的例子

当我们在程序中调用 p1.sayName方法时,编译器会沿着原型链(自底向上)地寻找原型对象上是否有这个方法

简述js原型链

如上图所示,编译器会先从p1自身(最外层)开始找

然后去 p1.proto(即Person的原型对象 = 外层红色方框)里面找

最后再到 p1.proto.proto(即Object的原型对象 = 内层红色方框)里面找

简述js原型链

上一篇:JAVA开发人员画图表总结(ECHARTS)


下一篇:vue 通过自定义指令实现 置顶操作;