JavaScript proto 原型链 问题

本文主要是介绍JavaScript proto 原型链 问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

这是一个JavaScript 原型链的面试题

function Parent() {
            this.a = 1;
            this.b = [1, 2, this.a];
            this.c = { demo: 5 };
            this.show = function () {
                console.log(this.a , this.b , this.c.demo );
           }
}
function Child() {
    this.a = 2;
    this.change = function () {
        this.b.push(this.a);
        this.a = this.b.length;
        this.c.demo = this.a++;
    }
}
Child.prototype = new Parent(); 
var parent = new Parent();
var child1 = new Child();
var child2 = new Child();
child1.a = 11;
child2.a = 12;
parent.show();
child1.show();
child2.show();
child1.change();
child2.change();
parent.show();
child1.show();
child2.show();

设及的 知识点

1. javascript proto 原型链
2. javascript 计算方法
3. this 指向问题
4. 构造函数

话不多说，开始具体解析

Child.prototype = new Parent();
// 1. Child.prototype.constructor === Parent ; // true;
// 2. Child.prototype.__proto === Parent.prototype ; // true ;
// 3. Child.prototype = {
//  a:1,
//  b:[1,2,1],
//  c:{demo:5},
//  show:function
//  }
var parent = new Parent();
// 构造函数创建对象 parent 
// parent:{
//  a:1,
//  b:[1,2,1],
//  c:{demo:5},
//  show:function
//  }
var child1 = new Child();
// child1 : {  a: 2 }
// child1.__proto__ === Child.prototype; true
var child2 = new Child();
// child2 : {  a: 2 }
// child2.__proto__ === Child.prototype; true
// child2.__proto__ === child1.__proto__; true
parent.show();
/// parent:{
//  a:1,
//  b:[1,2,1],
//  c:{demo:5},
//  show:function
//  }

child1.show();
// 因为 child1 没有 this.b 也没有 this.c 所以从原型链上找到 child1.__proto__ ; 
// 结果 11, [1,2,1],5
child2.show();
// 因为 child2 没有 this.b 也没有 this.c 所以从原型链上找到 child2.__proto__ ;
// 结果 12, [1,2,1],5

child1.change();

//   this.b.push(this.a);   由于child1 本身没有this.b 所以从原型链上找  child1.__proto__.b  = [1,2,1,11]
//   this.a = this.b.length; //  child1.a  = 4
 //   this.c.demo = this.a++;  由于child1 本身没有this.c所以从原型链上找  child1.__proto__.c  = child1.a++ ; 则为 4  因为 child1.a++ ; child.,a = 5;

child2.change();
//   this.b.push(this.a);   由于child2 本身没有this.b 所以从原型链上找  child2.__proto__.b; 此时child2.__proto__ === child1.__proto__ ; // child2.__proto__.b= [1,2,1,11,12]
//   this.a = this.b.length; //  child2.a  = 5
 //   this.c.demo = this.a++;  由于child2 本身没有this.c所以从原型链上找  child2.__proto__.c  = child.a++ ; 则为 5  因为 child2.a++ ; child2.,a =6 
parent.show(); //1, [1,2,1], 5
child1.show(); //5, [1,2,1,11,12], 5  因为 child1.__proto__ === child2.__proto__  true ; child1.prototype 等于 Child.prototype  等于  child2.__proto__;
child2.show(); //6, [1,2,1,11,12], 5

这篇关于JavaScript proto 原型链 问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！