javascript原型 - javascript变量作用域问题
大家讲道理
大家讲道理 2017-04-10 16:55:28
[JavaScript讨论组]

我定义了一个Cat类,在里面添加了三个私有变量,然后用原型的方式给这个类添加了displayinfo方法,问题是为什么这个方法访问不到该类的私有变量?

谢谢大家伙的回答,现在回头看看以前提问的问题真是有点太简单了,哈哈。

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(9)
高洛峰

F12控制台,不明白的地方打上断点。

重新加载,F11跳入函数执行处,同时右手边查看scope,并在watch挂上cat

函数执行完成(出栈)

F11继续,cat发生变化,

这个时候调用cat.displayInfo(),怎么可能访问到那些变量?

把Cat里的var全部改成this调试

阿神
var Cat=function(age,color,sex){
    var age=1;
    var color=2;
    var sex=3;
}
Cat.prototype.displayInfo=function(){
    console.log(color+''+age+''+sex);
}
var cat=new Cat('11');
cat.displayInfo();

1) JS中变量的作用域在函数中
2)函数声明时,如果定义的形参,那么JS解析器将自动为函数声明对应名字的内部变量(私有变量),默认值为undefined
3)一个声明过的变量重复声明是无效的
4)函数的内部变量只能在函数内部访问或通过闭包访问
5)如果一个函数内部变量没有再内部声明过或不在闭包作用域中,那么就会到全局作用域中查找,如果还是没有找到那么会报错ReferenceError: XXX is not defined
6) 当一个函数作为构造函数通过new操作符创建一个对象时,将会自动新建一个带有原型的对象赋值给this,你可以通过给this也就是新建的对象定义创建新的属性,在构造函数执行完毕后将新建的对象赋值给实例对象变量,题目中的cat变量
7) 为实例对象设置的属性不是私有的,外部依然可以访问到并且可以被删除(如果属性没有被配置过不可修改的话)

按上面个的描述
1)在构造函数中的var age/var color/var sex是无效声明,赋值有效
2)如果想为通过new操作符构建的实例对象设置属性,请使用this关键字
3)执行cat.displayInfo();将会报错~~ReferenceError: XXX is not defined

如果想正确运行

var Cat=function(age,color,sex){
    this.age=age;
    this.color=color;
    this.sex=sex;
}
Cat.prototype.displayInfo=function(){
    console.log('color:%s,age:%s sex:%s',this.color,this.age,this.sex);
}
var cat=new Cat('11');
cat.displayInfo();
console.log('AGE:%s',cat.age);
大家讲道理

那三个不叫私有变量,它们叫局部变量

天蓬老师
var Cat = function(age, color, sex){
    this.age = typeof age != "string" ? "xxxx" : age;
    this.color = color || "no color";
    this.sex = sex || "no sex";
}
Cat.prototype.displayInfo = function(){
    console.log(this.color+" "+this.sex+" "+this.age);
}

试试这样?
至于为什么这个方法访问不到该类的私有变量?其实你只要打印一下cat你就会发现var和this的区别,更详细的自己网上找找吧。

阿神

要用this。

阿神

你输出什么对象的变量呢,你完全没有在原型创建里指向呀

高洛峰

你可以通过放在闭包里面,访问里面的局部变量

(function(){
    var _age;
    var _color;
    var _sex;
    
    function Cat(age,color,sex){
        _age = typeof age != "string" ? "xxxx" : age;
        _color = color || "no color";
        _sex = sex || "no sex";
    }
    
    Cat.prototype.displayInfo=function(){
        console.log(_color+','+_sex+','+_age);
    }
    
    var cat = new Cat('11');
    cat.displayInfo();
})();
伊谢尔伦

我觉得提问者应该把它看成一个原型继承问题而不是变量作用域问题

ringa_lee

看prototype 和 proto

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号