关闭

JS中this的指向问题(全)

时间: 2018-06-29阅读: 1857标签: this

this关键字在js中的指向问题不管是工作还是面试中都会经常遇到,所以在此对它进行一下总结。


一、全局作用域中

this在全局作用域中指window。

//全局作用域中
console.log(this)//window
a =1;
console.log(this.a) //相当于window.a 1
//普通函数中
function fn(){
    console.log(this)
}
fn()//window


二:闭包中指window

    function fn(){
        function fn2(){
            console.log(this)
        }
        return fn2
    }
    fn()()   //window


三:函数调用模式:谁调用就指谁

这里obj.fn()是obj去调用fn,而obj.name=”b”,所以this.name=”b”; 
var fn=obj.fn的时候,fn是window.fn,因此fn()的结果是”a”. 
注意:this指向的是上一级调用它的对象,比如obj.fn()与window.obj.fn()都是输出b.

    var name="a"
    var obj ={
        name:'b',
        fn:function () {
            console.log(this.name)
        }
    }
    obj.fn() //b
    var fn=obj.fn
    fn()     //a


四:构造函数中,this指实例对象。

    function Person(name,age) {
        this.name=name;
        this.age=age;
    }
    Person.prototype.sayHi=function () {
        console.log('I am '+this.name+',I am '+this.age+' years old.')
    }
    var p1=new Person('张三',20)
    p1.sayHi() //I am 张三,I am 20 years old.


五:apply/call改变this的指向

JavaScript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。

主要区别为:apply的第二个参数是散列分布,call则可以是一个数组


六:定时函数中:this指向window

var name = 'window';
var obj = {
    name: 'obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(this.name);   //window
        }, 1000)
    }
}


七:bind改变this指向

var name = 'window';
var obj = {
    name: 'obj',
    fn: function () {
        var timer = null;
        clearInterval(timer);
        timer = setInterval(function () {
            console.log(this.name);   //obj
        }.bind(this), 1000)
    }
}

//bind()的作用类似call和apply,都是修改this指向。但是call和apply是修改this指向后函数会立即执行,
//而bind则是返回一个新的函数,它会创建一个与原来函数主体相同的新函数,新函数中的this指向传入的对象。
//也因此call/apply不适用于定时函数改变this指向


八:ES6箭头函数:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

  function foo() {
   setTimeout(() => {
     console.log('id:', this.id);
   }, 100);
 }

 var id = 21;

 foo.call({ id: 42 });
 // id: 42
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/904

JavaScript this 关键字详解

this关键字是JavaScript中最复杂的机制之一。它是一个很特别的关键字,被自动定义在所有函数的作用域中。对于那些没有投入时间学习this机制的JavaScript开发者来说,this的绑定一直是一件非常令人困惑的事。

匿名函数没有自己的this

匿名函数没有自己的this,因此,在构造对象中调用全局函数时,可以省去保存临时this,再将其传入全局函数这一步:

JS 中几种轻松处理this指向方式

与对象分离的方法会产生 this 指向不正确问题。静态地绑定this,可以手动使用一个附加变量self来保存正确的上下文对象。然而,更好的替代方法是使用箭头函数,其本质上是为了在词法上绑定this。

Js中this的绑定规则

对于 JavaScript 新手来说,this 是非常基础同时也难以理解的知识点。比如下面的代码,this 指向就有三种方式。默认情况下,this 指向全局对象。例如下面的代码。

Js中this指向问题(函数的调用方式)

在ES6之前,函数内部的this是由函数的调用方式决定的。构造函数调用 ,这时 p.say 属于Object,为Object的实例。this:say构造函数的实例,实例中并没有age属性,值为:undefined

JavaScript this 关键词

JavaScript this 关键词指的是它所属的对象。它拥有不同的值,具体取决于它的使用位置:在方法中,this 指的是所有者对象。单独的情况下,this 指的是全局对象。

this指针

javascript中this指针是动态的,主要是根据当前函数执行上下文及函数调用方式决定的.以函数方法调用时this指针全局或严格模式中为undefined,以方法调用时this是指针当前对象实例的.以构造函数方式时this指向当前创建的实现对象。

解读Javascript中的this机制,别再为了 this 发愁了

JavaScript中有很多令人困惑的地方,或者叫做机制。但是,就是这些东西让JavaScript显得那么美好而与众不同。比方说函数也是对象、闭包、原型链继承等等,而这其中就包括颇让人费解的this机制。

js中this的绑定规则及优先级

this绑定规则:函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条。默认绑定、隐式绑定:另一条需要考虑的规则是调用位置是否有上下文对象

理解 JS 中的 This, Bind, Call, 和 Apply

尽管这this是一个复杂的话题,但它也是在您开始编写第一个JavaScript程序后立即出现的话题。在本文中,您将了解什么this是指隐含根据上下文,您将学习如何使用bind,call和apply方法,明确确定的值this。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!