前端开发JS this的取值

软件开发小公司有前端几个
前端开发软件快捷键
前端开发软件ws

在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。

情况1:构造函数

html 代码

function Foo() {
    this.name = ‘王福朋’
    this.year = 1988
    console.log(this) //Foo{name:”王福朋”,year:1988}
}
var f1 = new Foo()
console.log(f1.name) //王福朋
console.log(f1.year) //1988

以上代码中,如果函数作为构造函数用,那么其中的this就代表它即将new出来的对象。

html 代码

function Foo() {
    this.name = ‘王福朋’
    this.year = 1988
    console.log(this) //Window
}
Foo()

这种情况下this是window,因为Foo函数只是当做普通函数执行,并没有实例化

情况2:函数作为对象的一个属性被调用时

html 代码

var obj = {
    x:10;
fn: function() {
    console.log(this);
    console.log(this.x);//10
}
};
obj.fn();

以上代码中,fn不仅作为一个对象的一个属性,而且的确是作为对象的一个属性被调用。结果this就是obj对象。

html 代码

var obj = {
    x:10;
fn: function() {
    console.log(this);//Window
    console.log(this.x);//undefined
}
};
var fn1 = obj.fn;
fn1();

如上代码,如果fn函数被赋值到了另一个变量中,并没有作为obj的一个属性被调用,那么this的值就是window,this.x为undefined。

情况3:函数用call或者apply调用

html 代码

var obj = {
    x:10;
};
    var fn=function(){
console.log(this);//Object{x: 10}
        console.log(this.x);//10
        }
        fn.call(obj);

当一个函数被call和apply调用时,this的值就取传入的对象的值。

情况4:全局调用普通函数

html 代码

var x = 10
var fn = function() {
    console.log(this) //Window
    console.log(this.x) //10
}
fn()

普通函数在调用时,其中的this也都是window。
在全局环境下,this永远是window

软件开发前端工资待遇
前端_安全_软件开发
web前端中文版开发软件下载
» 本文来自:前端开发者 » 《前端开发JS this的取值》
» 本文链接地址:https://www.rokub.com/6929.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!