找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发JS this的取值

2018-12-05 分类：JavaScript 阅读(776) 评论(0)
软件开发小公司有前端几个
前端开发软件快捷键
前端开发软件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前端中文版开发软件下载
赞(0)
前端开发者 » 前端开发JS this的取值
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论