javascript - js 中 prototype 继承问题

问题描述

问 题

function pp(json) {
  this.x = (json.x != null) ? json.x : '未知';
  this.xx = (json.xx != null) ? json.xx : this.x / 2;
}

function zz(x){
  this.x = x;
}

zz.prototype = new pp({});

---

然后

var zz = new zz(50);
alert(zz.x + '---' + zz.xx);

---

alert 显示的数据是 50 和 0 ，怎样才能简便的实时更新继承 pp 的 xx 的值？我想要的是 25。

求解惑

---

那有没有其他好的方法满足我的继承呢？

解决方案

我来说一下吧。按照你的代码来讲一下执行过程，先按照你的来。

首先应该是变量提升，var了一个全局zz变量，此时还是undefined，然后函数接着提升，此时，定义了一个函数pp，接着又一个函数直接覆盖了zz的值（或者叫zz这个变量的指针指向了zz这个被申明的函数对象），目前为止，一切正常。

然后给zz这个函数增加原型链，或者叫覆盖！覆盖的是一个被构造过的pp函数函数对象。这里就是错误的开始。
因为你直接给zz.prototype赋值的是一个构造函数对象，在new的过程中传进去的是一个空对象，所以当时的x已经是未知，xx就成了未知这个字符串除以2，成了NaN。然后这个新开辟的对象直接就赋值给了zz.prototype。
需要注意的是这个时候zz.prototype的值是一个已经被实例化的对象了，继续向下走程序。

继续用构造的方法来new zz，传50进去，然后，zz.x就等于了50，然后把这个构造好的对象赋值重新赋值给zz这个早已申明过的zz（或者叫做zz的指针改指向新的实例化对象）。

然后就是alert，zz.x当然是正确的，xx的时候就去找原型链了，果然找到了，一个早已生成好的NaN。

---

下面讲一下，你想实现的东西，就是在给x赋值的时候自动更新xx的值（不知道我理解到题主的题意没有），其实非常简单，非常多种实现：
先来setter，这应该最符合题意的 https://developer.mozilla.org...

var zz = {
    set x(num){
        this._x = !num && num !==0 ? '未知' : num;
        this.xx = this._x / 2;
    },
    get x(){
        return this._x;
    }
};

zz.x = 50;
console.log(zz.x, zz.xx);

我这儿用的es6的写法，习惯了。。。题主可以用es5中的defineProperty写，反正相关文档上面给了。

再来就是楼上讲的那种最简单的构造。

function ZZ(num){
    this.x = !num && num !==0 ? '未知' : num;
    this.xx = this.x / 2;
}

var zz = new ZZ(50);
console.log(zz.x, zz.xx);

还有就是原型链xx，不过这个跑的有点偏，篡改题意了。

function ZZ(num){
    this.x = !num && num !==0 ? '未知' : num;
}
ZZ.prototype.xx = function(){
    return this.x / 2;
}

var zz = new ZZ(50);
console.log(zz.x, zz.xx());

这篇关于javascript - js 中 prototype 继承问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！