Javascript原型和原型链相关题型

相关知识点可查看我的另一篇博客—原型与原型链

1.分析运行结果

var F = function() {}

Object.prototype.a = function() {
  console.log('a()')
}

Function.prototype.b = function() {
  console.log('b()')
}

var f = new F()

f.a()  
f.b()  
F.a()  
F.b() 

解析：

f是构造函数F的实例对象，因此有f.__proto__ === F.prototype
F.prototype也是一个普通对象，可以理解为Object构造函数创建的,因此有F.prototype.__proto__ === Object.prototype
F作为函数对象，也有自己的__proto__，指向它的原型Function.prototype
Function.prototype也是一个普通对象，可以理解为Object构造函数创建的,因此有Function.prototype.__proto__ === Object.prototype
总结：两条原型链
对于f，有以下
console.log(f.__proto__ === F.prototype)  //true
console.log(F.prototype.__proto__ === Object.prototype)  //true
对于F,有以下
console.log(F.__proto__ === Function.prototype) //true
console.log(Function.prototype.__proto__ === Object.prototype) //true
所以题目中函数b没有出现在f的原型链中，所以答案：
f.a() // a()
f.b() // b is not a function(报错)
F.a() // a()
F.b() // b()

2.实现instanceof

解析：

instanceof:用于检测构造函数的prototype属性是否出现在对象的原型链中任何位置
拿上题举例：
console.log(f instanceof Function) //false
console.log(F instanceof Function) //true
console.log(f instanceof Object) //true
console.log(F instanceof Object) //true
写法一：利用isPrototypeOf() //检测一个对象是否出现在了另一个对象原型链上
function myInstanceof(obj, constructor) {
    return constructor.prototype.isPrototypeOf(obj)
}
console.log(myInstanceof(f,Function)) //false
console.log(myInstanceof(F,Function)) //true
console.log(myInstanceof(f,Object)) //true
console.log(myInstanceof(F,Object)) //true
写法二：
function myInstanceof(obj, constructor) {
    //获取obj的原型对象
    let prototypeObject = obj.__proto__; 
    //获取构造函数的prototype属性，本质就是对象
    let constructorPrototype = constructor.prototype; 
    //判断二者是否相等，相等则说明构造函数的prototype出现在了obj的原型链上
    if (prototypeObject === constructorPrototype) { 
        return true
    }
    //查找到原型链尽头，其实就是Object.prototype.__proto__ === null
    if (prototypeObject == null) {
        return false
    }
    //递归，向原型链上一级继续查找
    return myInstanceof(obj.__proto__, constructor)
}
console.log(myInstanceof(f,Function)) //false
console.log(myInstanceof(F,Function)) //true
console.log(myInstanceof(f,Object)) //true
console.log(myInstanceof(F,Object)) //true

3.找出对象 obj 不在原型链上的属性

牛客链接：https://www.nowcoder.com/practice/0158a4f165154f2eaf27d1907aa55e57?tpId=2&tqId=37908&ru=/exam/oj

解析：

hasOwnProperty()检查对象自身属性，不包括原型链上的
function iterate(obj) {
    let result = [];
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            result.push(`${key}: ${obj[key]}`);
        }
    }
    return result;
}

4.给定一个构造函数 constructor，请完成 alterObjects 方法，将 constructor 的所有实例的 greetin属性指向给定的 greeting 变量。

牛客链接：https://www.nowcoder.com/practice/4f7d25a30eb1463cbf1daac39ec04f8d?tpId=2&tqId=37907&ru=/exam/oj

解析：

分析题目：将构造函数所有的实例对象的greeting属性改为指定greeting变量，因为同一个构造函数所产生的多个实例都会共用原型上的属性、方法，所以直接修改所有实例的原型对象（constructor.prototype）即可
function alterObjects(constructor, greeting) {
    constructor.prototype.greeting  = greeting;
}

5.分析运行结果

function Fn() {
    this.x = 100;
    this.y = 200;
    this.getX = function () {
        console.log(this.x);
    }
}
Fn.prototype = {
   //为重写后的prototype增加constructor属性，并规定其正确的指向
    constructor: Fn, 
    y: 400,
    getX: function () {
        console.log(this.x);
    },
    getY: function () {
        console.log(this.y);
    },
    sum: function () {
        console.log(this.x + this.y);
    }
};
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);
console.log(f1.getY === f2.getY);
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);
console.log(Fn.prototype.__proto__.constructor);
f1.getX();  
f1.__proto__.getX();  
f2.getY(); 
Fn.prototype.getY(); 
f1.sum();
Fn.prototype.sum(); 

解析：

console.log(f1.getX === f2.getX); //false
因为构造函数Fn中定义了getX方法，所以实例对象f1、f2中都有自己的getX方法，并不是公有的

console.log(f1.getY === f2.getY); //true
都从原型上获取getY方法，公有方法

console.log(f1.__proto__.getY === Fn.prototype.getY); //true
都是f1原型上的getY方法

console.log(f1.__proto__.getX === f2.getX); //false
f1原型上的getX方法和f2实例对象自身的getX方法

console.log(f1.getX === Fn.prototype.getX); //false
f1实例对象自身的getX方法和f1原型上的getX方法

console.log(f1.constructor); //Fn
f1自身没有constructor属性，所以从原型获取，原型对象默认有一个constructor属性,且指回该构造函数
Fn.prototype.constructor === Fn
ps:如果没有constructor: Fn（第10行代码），输出结果将为Object，原因是重写后的Fn.prototype是new Object生成的，constructor属性,指回该构造函数,所以是Object

console.log(Fn.prototype.__proto__.constructor); //Object
Fn.prototype.__proto__ === Object.prototype
Object.prototype.constructor === Object

f1.getX(); //100
f1.__proto__.getX(); //undefined
f2.getY(); //200
Fn.prototype.getY(); //400
f1.sum(); //300
Fn.prototype.sum(); //NaN
一句话总结：对象自身有，直接从自身找，自身没有，就顺着原型链向上找

6.分析运行结果

var tmp = {};
var A = function() {};
A.prototype = tmp;
var a = new A();
A.prototype = {};
var b = Object.create(tmp);
console.log(a instanceof A);
console.log(b instanceof A);

解析：

分析代码
前4行可得出 ∵ a.__proto__ === A.prototype ∴ a.__proto__ === tmp
第5行虽然改变了A.prototype的指向，但是不会影响到a.__proto__的指向，此时有
a.__proto__ ！== A.prototype a.__proto__ === tmp
第6行让tmp作为b对象的原型对象，有b.__proto__ === tmp
所以a、b的原型链 a/b.__proto__ === temp temp.__proto__ === Object.Prototype ...
A.prototype并未在此原型链中出现因而返回false
console.log(a instanceof A); //false
console.log(b instanceof A); //false

持续补充。。。