JS 原型、原型链题目

284 阅读1分钟

原型

  • 定义:Function.prototype就是原型,是一个对象,也称为原型对象,实例“继承”那个对象的属性。
  • 作用:共享方法
  • 原型中this的指向是实例

image.png

Person 就是构造函数,Person.prototype就是原型

image.png

有个构造函数,我们就可以在原型上创建可以“继承”的属性,并通过new操作符创建实例

image.png

在原型上定义一个属性,那么实例上就可以“继承”这个属性:

image.png

proto 隐式原型

实例通过—__proto__访问到原型,如果是实例,那么久可以通过这个属性直接访问到原型:

image.png

constructor 构造函数

既然构造函数通过prototype来访问到原型,那么原型也应该能够通过某种途径访问到构造函数,这就是constructor

image.png

image.png

原型链

  • 定义:原型与原型层层相链接的过程即为原型链

_proto_作为不同对象之间的桥梁,用来指向创建它的构造函数的原型对象的 image.png

  • 每个对象_proto_的都是指向它的构造函数的原型对象prototype的

person1._proto_ === Person.prototype

  • 构造函数时一个函数对象,通过Function构造器产生的

Person._proto_ === Function.prototype

  • 原型对象本身是一个普通对象,而普通对象的构造函数都是Object

Person.prototype._proto_ === Object.prototype

  • 所有的构造器都是函数对象,函数对象都是Function构造产生的

Object._proto_ === Function.prototype

  • Object的原型对象也有_proto_属性指向null,null是原型链的顶端

Object.prototype._proto_ === null

总结

  • 所有函数(包括Function)的__proto__指向Function.prototype
  • 自定义对象实例的__proto__指向构造函数的原型(Function.prototype)
  • 函数的prototype__proto__指向Object.prototype
  • object.prototype.__proto__ ---> null

题目一:

function Person(){}
Person.prototype.n = 1
var p1 = new Person()
Person.prototype = {
 n:2,
 m:3
}
var p2 = new Person()
console.log(p1.n)  // 1
console.log(p1.m)  // undefined
console.log(p2.n)  // 2
console.log(p2.m)  // 3

题目二:

function F(){}
Object.prototype.a  = function(){
  console.log('a()')
}
Function.prototype.b = function(){
  console.log('b()')
}
var f = new F()
f.a()   // a()
f.b()   // f.b is not a function
F.a()   // a()
F.b()   // b()