js面向对象编程_this解析

2018年学前端开发晚不晚|web前端 开发文档|web前端开发课程百度云

1.全局环境下,this === window,如

javascript 代码

console.log(this === window);

2.构照函数中的this,指的是实例对象,如

javascript 代码

var obj = function(p) {
    this.p = p
}
obj.prototype.getP = function() {
    return this.p
}
var o = new obj(‘Hello World!’)
console.log(o.p)
// >>>Hello World!
console.log(o.getP())
// >>>Hello World!

使用注意点

1. 避免多层使用this

javascript 代码

var obj = {
    f1: function() {
        console.log(this)
        var f2 = (function() {
            console.log(this)
        })()
    },
}
obj.f1()
// >>>Object
// Window

上面代码包含两层this,结果运行后,第一层指向该对象,第二层指向全局对象。

如何修改?改用一个指向外层this的变量_that
javascript 代码

var obj = {
    f1: function() {
        console.log(this)
        var _that = this
        var f2 = (function() {
            console.log(_that)
        })()
    },
}
obj.f1()
// >>>Object
// Object
2. 避免数组处理方法中的this

javascript 代码

var obj = {
    v: ‘hello’,
    p: [‘a1’, ‘a2’],
    f: function f() {
        this.p.forEach(function(item) {
            console.log(this.v + ‘ ‘ + item)
        })
    },
}
obj.f()
// >>>undefined a1
// undefined a2

出现undefined的原因是forEach方法的回调函数中的this,其实是指向window对象,因此取不到obj.v的值

解决方法一:使用中间变量
javascript 代码

var obj = {
v:’hello’,
p:[‘a1′,’a2’],
var _that = this;
f:functionf(){
this.p.forEach(function(item){
console.log(_that.v+”+item);
});
}
}
obj.f();
// >>>hello a1
// hello a2

解决方法二:将this当作foreach方法的第二个参数

javascript 代码

var obj = {
    v: ‘hello’,
    p: [‘a1’, ‘a2’],
    f: function f() {
        this.p.forEach(function(item) {
            console.log(this.v + ‘ ‘ + item)
        }, this)
    },
}

百度前端开发绩效考核|vim配置前端开发环境|前端开发 浏览器兼容

» 本文来自:前端开发者 » 《js面向对象编程_this解析》
» 本文链接地址:https://www.rokub.com/5118.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!