javascript - 问一个JS继承的问题-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 问一个JS继承的问题

高洛峰 2017-04-11 12:57:01

[JavaScript讨论组]

586

function Tree () {}

Tree.prototype.leaf = 0
Tree.prototype.addLeaf = function () {this.leaf++}

let tree1 = new Tree()
let tree2 = new Tree()

tree1.addLeaf()
tree1.addLeaf()

console.log(tree2.leaf)

更新：这里我把箭头函数去掉下
为什么输出是0.......求解惑

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(6)

天蓬老师2017-04-11 12:59:01 6楼

来晚了，根据楼主的更新，谈下自己的理解，抛砖引玉。。。：

this.leaf++ 可以看做：

this.leaf = this.leaf + 1

this本身原来是是没有leaf属性的，所以会去this的原型链上找，结果在Tree.prototype找到了（Tree.prototype.leaf = 0），所以这句可以看成：

this.leaf = 0 + 1

相当于在this上增加了leaf属性为1，下次访问this.leaf已经不会从原型链取值了。
所以tree1执行完2次addLeaf之后是：

{ leaf: 2 }

而tree2还是空的，自身没有leaf属性，tree2上访问leaf属性仍会去原型链上找，原型上leaf还是0。

赞 +0

添加回复

PHP中文网2017-04-11 12:59:01 5楼

很简单,this指向与原型问题。

    function Tree () {}
    
    Tree.prototype.leaf = 0 //这一步,所有的new Tree都会获得一个公共的 leaf 属性
    
    //关键在与这里的 this.leaf. 箭头函数没有独自的this,这里的this会指向的是window. 所以是 window.leaf++
    Tree.prototype.addLeaf = () => {this.leaf++}
    
    let tree1 = new Tree()
    let tree2 = new Tree()
    
    tree1.addLeaf() //window.leaf自加了1
    tree1.addLeaf() //window.leaf自加了1
    
    console.log(tree2.leaf)

赞 +0

添加回复

ringa_lee2017-04-11 12:59:01 4楼

console.log(leaf)
NaN

赞 +0

添加回复

巴扎黑2017-04-11 12:59:01 3楼

function Tree () {}

Tree.prototype.leaf = 0
Tree.prototype.addLeaf = function () {this.leaf++;debugger}

let tree1 = new Tree()
let tree2 = new Tree()

tree1.addLeaf()
tree2.addLeaf()

console.log(tree2.leaf)

结果为1，你倒数第二句语句打错了

赞 +0

添加回复

大家讲道理2017-04-11 12:59:01 2楼

没看懂，你这描述里面没有箭头函数啊？
如果你问的就是你所写的代码，那可以这样解释：因为你没有执行实例上的这个函数啊！

  tree2.addLeaf();

那当然最后tree2.leaf还是0了！

赞 +0

添加回复

伊谢尔伦2017-04-11 12:59:01 1楼

我赞同一楼的回答，但是还有一问想请解答：
当Tree的原型对象里面有一个对象字面量属性时，情况似乎不太一样了：

var Tree = function(){};
Tree.prototype.men = {
    age:15
};
Tree.prototype.setAge = function(){this.men.age = 20};
var tree1 = new Tree();
var tree2 = new Tree();
tree1.setAge(20);
console.log(tree2.men); // {age:20}

请问，这里为什么又是20？为什么没有在tree1里单独创建一个属性，而是修改的是原型上值？

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>