javascript 记录关于继承的一道题_Ace7523的专栏文章_微信文章

直接进入正题吧

function Fn() {
    this.x = 100
    this.y = 200
    this.getX = function() {
        console.log(this.x)
    }
}
Fn.prototype = {
    y: 400,
    getX : function() {
        console.log(this.x)
    },
    getY : function() {
        console.log(this.y)
    },
    sum : function() {
        console.log(this.x + this.y)
    }
}

var f1 = new Fn
var f2 = new Fn

console.log(f1.getX === f2.getX)
console.log(f1.getY === f2.getY)
console.log(f1.__proto__ === Fn.prototype)

console.log(f1.__proto__.getY === Fn.prototype.getY)
console.log(f1.__proto__.getX === f2.getX)
console.log(f1.getX === Fn.prototype.getX)

console.log(f1.constructor === Fn.prototype.constructor)
console.log(Fn === Fn.prototype.constructor)
console.log(Fn.prototype.__proto__.constructor === Object)

f1.getX()
f1.__proto__.getX()
f2.getY()

Fn.prototype.getY()
f1.sum()
Fn.prototype.sum()
复制代码

答案

  console.log(f1.getX === f2.getX) 
  // false f1 f2 都是new出来的实例 实例的getX ，引用类型
  
  console.log(f1.getY === f2.getY)
  // true 实例上没有，同一个引用原型的方法
  
  console.log(f1.__proto__ === Fn.prototype)
  // true 就是解析中的第4点

  console.log(f1.__proto__.getY === Fn.prototype.getY)
  // true 同上
  
  console.log(f1.__proto__.getX === f2.getX)
  // false 前者是原型对象上的  后者是实例的属性
  
  console.log(f1.getX === Fn.prototype.getX)
  // false

  console.log(f1.constructor === Fn.prototype.constructor)
  // true 
  // 实例无constructor ; Fn.prototype 被手动重写，
  // 因为没有写constructor属性，
  // 所以Fn.prototype没有constructor，
  // 如果没有被重写的话，是会有的。
  // 所以他们都顺着原型链向上查找 找到同一个公共的。
  
  console.log(Fn === Fn.prototype.constructor)
  // false
  
  console.log(Fn.prototype.__proto__.constructor === Object)
  // true
  
  f1.getX() // 100
  f1.__proto__.getX() // undefined
  f2.getY() // 200

  Fn.prototype.getY() // 400
  f1.sum() // 300
  Fn.prototype.sum() // NaN
复制代码

解析

原型的题目，上篇里总结了一些__proto__，prototype等角色之间的关系，记牢了，就很容易，其实也挺容易记住的：

1 实例对象有__proto__, 没有prototype
2 函数（构造函数）有prototype，浏览器会自动给函数加上prototype
3 prototype也是对象，所以prototype也拥有__proto__属性
4 实例的__proto__指向构造函数的prototype
5 构造函数 Fun === Fun.prototype.construetor 前提是没有被重写Fun.prototype
6 所以构造函数的prototype对象上拥有__proto__指向他的构造函数的prototype
7 构造函数没有构造函数的话，构造函数的__proto__指向Object对象的prototype
8 Object的__proto__ 指向 null