美文网首页
javascript this指向

javascript this指向

作者: yaoby | 来源:发表于2018-07-02 18:30 被阅读0次

首页,js默认的对象是Window,调用一个函数是,如果不去改变它的调用对象的话,this基本上都会指向Window。

es6的箭头函数本身是没有this的。普通的函数也没有自己的this,但普通函数的this会在你调用的时候重新设置要指向的对象。

  • 普通函数的this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象,当有多层调用时,this的指向为它的上一级。
  • 箭头函数的this根据他的父级的this的指向的变化而变化。
  • 严格模式下,全局的函数的this指向会变成undefined。用babel编译js文件时,使用的是严格模式,如果this是指向全局的会被编译成undefined。

普通函数的this的几种指向情况

例子1:

function fn() {
    var testfn = 2;
    console.log(this); // Window
    console.log(this.testfn); // undefined
}
fn();

这里的fn的实际的调用是 window.fn(),所以this的指向是Window,又因为testfn是再fn里面的,所以this.testfn的值为undefined。

例子2:

var methods = {
    num: '111',
    init: function () {
        console.log(this.name);  // '111'
    }
};
methods.init();

这里的this指向的是methods,init的实际调用是window.methods.init();

例子3:

var methods = {
    num: '111',
    b: {
        name: 222,
        init: function () {
            console.log(this.name);  // 222
        }
    }
};
methods.b.init();

例子4:

var methods = {
    num: '111',
    b: {
        name: 222,
        init: function () {
            console.log(this); // Window
            console.log(this.name);  // undefined
        }
    }
};
var fn = methods.b.init;
fn();

这里的this的指向为什么会变Window呢?
首先init这个函数被赋值给fn,现在fn这个函数就有了init函数里面的内容(也就是两个console),这时,init这个函数并没有执行;第二步,调用fn(),这时fn是直接调用,也就是它的实际的写法是window.fn();所以它的this的指向是Window,而name这个属性是在methods对象中的,所以this.name的值为undefined。

总结:
  • 如果函数的调用是直接调用,没有上一级也就是它的前面没有“.”,则它的this指向是Window,例:fn();
  • 如果函数的调用前面有一个或多个“.”(不算window的情况下),则它的this指向是它的上一级,例:methods.init();它的this指向的是methods; methods.b.init();它的this指向的是b。

构造函数中的this

例1:正常情况下

function fn() {
    console.log(this);   // fn();
}
var f = new fn();
console.log(f);

正常情况下的构造函数中的this会指向本身,也就是你new的这个函数。

例2:有return的(接下来的几种情况)

返回一个对象

function fn() {
    console.log(this); // {}
    return {};
}
var f = new fn();
console.log(f);

返回一个函数

function fn() {
    console.log(this);  //function(){}
    return function(){};
}
var f = new fn();
console.log(f);

返回一个数值

function fn() {
    console.log(this);  // fn()
    return 1;
}
var f = new fn();
console.log(f);

返回undefined和null

function fn() {
    console.log(this);  // fn()
    return undefined;
}
var f = new fn();
console.log(f);
function fn() {
    console.log(this);  // fn()
    return null;
}
var f = new fn();
console.log(f);

总结:如果返回值是一个对象(null虽然也是对象,但它在这个情况下比较特殊),那么this指向的就是那个返回的对象,如果返回值不是一个对象那么this还是指向函数的实例。

es6 this的指向

例1:

methods = {
    num: '111',
    init: () => {
        console.log(this);     // Window
        console.log(this.num); // undefined
    }
};
methods.init();

这里的init里面的this为什么指向的不是methods这个对象呢?前面说到,箭头函数this的指向是根据父级的this的变化而变化的。这里的methods他的this指向的是window,所以init里面this也是指向window,无论init里面嵌多少层箭头函数,它的指向还是会指向window。

例2:

methods = {
    num: '111',
    init: function() {
        console.log(this.num);      // '111'
        var fn = () => {
            console.log(this.num);  // '111'
        };
        fn();
    }
};
methods.init();

这个函数结合前面的知识点看,init现在使用的是普通函数,所以这里它的this指向的是methods。而fn的父级是init,init的this已经不是指向window了,所以fn里面的this也会跟着改变。

相关文章

  • javascript this 指向

    我在文章《javascript 执行上下文》中介绍了 javascript 代码在执行时,会相应地创建对应执行上下...

  • javascript this指向

    首页,js默认的对象是Window,调用一个函数是,如果不去改变它的调用对象的话,this基本上都会指向Windo...

  • 关于js函数中this的指向的问题

    @(javascript)[JavaScript中this的指向] 关于js函数中this的指向的问题 javas...

  • JavaScript_this指向

    this的指向是在函数执行的时候确定的;同一个函数由于调用的方式不同,this的指向也会发生变化; this的几种...

  • JavaScript this的指向

    在 JavaScript 中 this 取什么值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了,因为...

  • JavaScript--this指向

    this存在的场景1)作为普通函数中的this2)使用call apply bind3)作为对象方法被调用4)在c...

  • JavaScript之this指向

    this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。 this绑定规则: 默认绑定,...

  • JavaScript this指向总结

    JS中this的指向有些复杂,分为较多种的情况。此外,在严格模式和非严格模式之间也会有一些差别。 注:node环境...

  • JavaScript中this指向

    文章较长,希望你耐心阅读并有所收获。 this指向 想必各位看客老爷搜索此问题,多多少少还是被this迷惑住了,今...

  • JavaScript:this的指向

    this 的默认绑定 全局环境下的 this 指向了 window 函数独立调用,函数内部的 this 也指向了 ...

网友评论

      本文标题:javascript this指向

      本文链接:https://www.haomeiwen.com/subject/ohgluftx.html