Js原型链容易出错的面试题

用户10106350

发布于 2022-10-28 13:00:49

4550

发布于 2022-10-28 13:00:49

文章被收录于专栏：WflynnWeb

Object与Function的关系

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

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

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

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

Object instanceof Function // true
Object instanceof Object // true
Function instanceof Function // 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

10.hadoop数据分析平台第三版

链接：https://pan.baidu.com/s/1zY_N3ahIqmGuNPvowoYGag

提取码：p3zu

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-12-02，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自 WflynnWeb 微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度