美文网首页
JS中的this

JS中的this

作者: FWHeart | 来源:发表于2017-07-16 14:44 被阅读0次

JS中的this

众所周知,JS中this的代表的是当前函数调用者的上下文。JS是解释性的动态类型语言,函数在调用时刻才解释其中的语句,因此this所表示的对象也是动态决定的。

默认绑定

默认情况下this总是指向调用该函数的对象和全局对象(在最外层调用函数),无论函数嵌套了多少层

function testThis(){
    console.log(this);
}

var obj = {
    testThis:testThis
};

testThis();
obj.testThis();

在浏览器下分别输出Window对象和Object对象

function foo(){
    setTimeout(() => {
        //这里的this在此法上继承自foo()
        console.log(this.a);
        },100);
}
var a = 9;
foo(); // 9

结果为9,说明内层函数和外层函数一样指向了window对象;

显示绑定

显示绑定指的是人为改变this的指向,如call、apply、bind函数

var test = (function(){
    var num = 0;
    return function(){
        console.log(++num + ": ",this);
    }
})();

test.call(123);
test.call("123");
test.call(true);
test.call(null);
test.call(undefined);

test.apply(123);
test.apply("123");
test.apply(false);
test.apply(null);
test.apply(undefined);

test.bind(123)();
test.bind("123")();
test.bind(true)();
test.bind(null)();
test.bind(undefined)();

输出结果皆是Number、String、Boolean、Window、Window

从输出的结果可以看出this指向被修改了,并且如果是基本类型数字、字符串、布尔值等情况,this会将其转换成对应的包装类型。如果类型为null,undefined则会使用全局对象(window)。

new绑定

使用new创建一个对象时:

  1. 先创建一个空对象,把this指向该对象,创建原型链
  2. 运行函数的逻辑
  3. 如果函数中有返回值则返回的对象为返回值,否则默认返回this作为返回对象
function Test1(){
    console.log(this);
    this.func = function(){
        console.log("in test1");
    };
}

function Test2(){
    console.log(this);
    this.func = function(){
        console.log("in test2")
    };
    return new Test1();
}

var test1 = new Test1();
var test2 = new Test2();
test1.func();
test2.func();

可以看到输出为Test1、Test2、Test1、"in test1"、"in test2"

说明:

  • 使用new确实要执行一遍函数;
  • 返回值影响到最后的生成对象;
  • 没有返回值时默认返回this

参考文献:
你不知道的JavaScript(上卷)
JavaScript高级程序设计(第三版)

相关文章

  • JavaScript 04 (do...while循环/for

    js循环,js循环嵌套,js do...while循环,js的for循环,js中的break,js中的contin...

  • iOS原生&JS交互

    OC 获取js中的key OC调用js方法 JS调用OC中不带参数的block JS调用OC中带参数的block ...

  • JS 对象

    JS对象 JS对象的意义和声明 在JS中,对象(OBJECT)是JS语言的核心概念,也是最重要的数据类型。在JS中...

  • 单引号和双引号

    JS中 js中单引号和双引号的区别(html中属性规范是用双引号,js中字符串规定是用单引号)(js中单引号区别和...

  • js中的this

    一句话,call的第一个参数 看几个例子例1. 这里的this是什么?不要靠猜,是call的第一个参数,不知道去看...

  • js 中的this

    首先js中函数的this在函数被调用时总是指向一个对象(this对象是在运行时基于函数的执行环境绑定的) 然后 它...

  • JS中的this

    JS中的this 众所周知,JS中this的代表的是当前函数调用者的上下文。JS是解释性的动态类型语言,函数在调用...

  • js中的!!

    !!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false。 var...

  • js中的this

    目标:js中this的指向? 问题的引出 指出this指向什么 js中函数的三种调用形式 func(p1, p2)...

  • JS中的this

    初学JavaScript经常被this绕晕,所以我总结一下JavaScript中的this。首先声明本文讨论的是非...

网友评论

      本文标题:JS中的this

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