JS面试点-原型链相关

Object与Function的关系

构造器Function的构造器是它自身

Function._proto_ === Function.prototype // true
Function.constructor === Function // true

构造器Object的构造器是Function（由此可知所有构造器的constructor都指向Function）

Object.constructor === Function // true

构造器Function的__proto__是一个特殊的匿名函数function() {}

console.log(Function.__proto__) // function() {}

这个特殊的匿名函数的__proto__指向Object的prototype原型。

Function.__proto__.__proto__ === Object.prototype // true

Object的__proto__指向Function的prototype

Object.__proto__ === Function.prototype // true

Object instanceof Function // true
Object instanceof Object // true 
Function instanceof Function // true

console.log(Function.prototype.constructor)    // Function()
console.log(Function.prototype.__proto__)      // Object.prototype
console.log(Function.prototype.__proto__.__proto__)    // NULL
console.log(Function.prototype.__proto__.constructor)  // Object()
console.log(Function.prototype.__proto__ === Object.prototype) // true

题1：

function A() {}
function B(a) {
    this.a = a;
}

function C(a) {
    if (a) {
        this.a = a;
    }
}

A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;

console.log(new A().a); // 1
console.log(new B().a); // undefined
console.log(new C(2).a); // 2

• 由于构造函数B存在属性a，但是由于没有传入参数，导致属性a的值是undefined，后来又一次执行了 B.prototype.a = 1;在B的原型上添加了属性a，并赋值为1，当查找属性或方法是，先查找自身，自身没有，再去原型链上的，如果在自身找到了，就会停止，这个例子中，我们找到了a但是a的值是undefined，undefined也是值，找到了就停止，尽管原型链上还有值，js也不会继续查找下去。
• 实例化一个构造函数C并传入参数2，因为有参数，所以，构造函数C存在自有属性a，并且属性a的值为2
• C.prototype.a = 1;在C的原型对象上添加一个属性a，并且赋值1。自有属性和原型属性都存在，这时候取值当然就是从自有属性中取。

​

题2：

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

输出 a b a Uncaught TypeError: f.b is not a function

F.__proto__指向Function.prototype，而Function.prototype.__proto__是Object.prototype，所以F可以取到a(),b()两个方法。

f 的__proto__指向F.prototype，F.prototype.__proto__指向Object.prototype，由于f的原型链上没经过Function.prototype，所以 f 取不到 b() 方法

题3：

var A = function () {
}
A.prototype.n = 1
var b = new A()
A.prototype = {
    n: 2,
    m: 3
}
var c = new A()
A.prototype = {
    // 这种写法会清空之前的属性
}
var d = new A()
console.log(b.n, b.m, c.n, c.m, d.n, d.m)

最后输出：// 1 undefined 2 3 undefined undefined

题4

function Fn () {
    this.x = 100
    this.y = 200
    this.getX = function () {
        console.log(this.x)
    }
}
Fn.prototype.getX = function () {
    console.log(this.x)
}
Fn.prototype.getY = function () {
    console.log(this.y)
}
var f1 = new Fn
var f2 = new Fn

输出

console.log(f1.getX === f2.getX) // false
console.log(f1.getY === f2.getY) // true
console.log(f1.__proto__.getY === Fn.prototype.getY) // true
console.log(f1.__proto__.getX === f2.getX) // false
console.log(f1.__proto__.getX === Fn.prototype.getX) // true
console.log(f1.constructor)	// Fn
console.log(Fn.prototype.__proto__.constructor)	// Object
f1.getX() // 100
f1.__proto__.getX()	// undefined 
f2.getY() // 200
Fn.prototype.getY()	// undefined

题5

function fun () {
    this.a = 0
    this.b = function () {
        console.log(this.a)
    }
}
fun.prototype = {
    b: function () {
        this.a = 20
        console.log(this.a)
    },
    c: function () {
        this.a = 30
        console.log(this.a)
    }
}

输出

var my_fun = new fun()
my_fun.b() // 0
console.log(my_fun.a) // 0
my_fun.c() // 30
console.log(my_fun.a) // 30
var my_fun2 = new fun()
console.log(my_fun2.a) // 0
my_fun2.__proto__.c() // 30
console.log(my_fun2.a) // 0
console.log(my_fun2.__proto__.a) // 30