美文网首页
javascript中this的四种用法

javascript中this的四种用法

作者: 菲龍探雲 | 来源:发表于2016-11-02 14:03 被阅读113次

this是javaScript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

this

在函数执行时,this总是指向调用该函数的对象。要判断this的指向,其实就是判断this所在的函数属于谁。

在《javaScript语言精粹》这本书中,把this出现的场景分为四类,简单的说就是:
有对象就指向调用对象
没有调用对象就指向全局对象
用new构造就指向新对象
通过apply或call或bind来改变this的所指

1)函数有所属对象时:指向所属对象

函数有所属对象时,通常通过 .表达式来调用,这时this自然指向所属对象:

var myObject = {value: 100};
myObject.getValue = function () {
    console.log(this.value)//输出100
    //输出myObject对象本身
    console.log(this)
    return this.value
};
console.log(myObject.getValue());//100

getValue()属于对象myObject,并由myObject进行* . *调用,因此this指向对象myObject

2)函数没有所属对象:指向全局对象

var myObject = {value: 100};
myObject.getValue = function () {
    var foo = function () {
        console.log(this.value)//underfined 
        console.log(this);//window
    };
    foo();
    return this.value;
};
console.log(myObject.getValue()); //100

在上述代码块中国,foo函数虽然定义在getValue的函数体内,但实际上它既不属于getValue也不属于myObject。foo并没有被绑定在任何对象上,所以当调用时,它的this指针指向了全局对象global。

3)构造器中的this:指向新对象

js中,我们通过new关键字来调用构造函数,此时this会绑定在该新对象上。

 var SomeClass = function () {
    this.value = 100;
};
var myCreate = new SomeClass();
console.log(myCreate.value);//100

4)apply和call调用以及bind绑定:指向绑定的对象

apply()方法接收两个参数第一个是函数运行的作用域,另外一个是一个参数数组(arguments)。

call()方法第一个参数的意义与apply()方法相同,只是其他的参数需要一个个列举出来。

简单来说,call的方法更加接近我们平时调用函数,而apply需要我们传递Array形式的数组给他。它们是可以互相转换的。

var myObject = {value: 100};
var foo = function () {
    console.log(this);
};
foo(); // 全局变量 window
foo.apply(myObject);// 对象 myObject
foo.call(myObject);  //对象 myObject
var newFoo = foo.bind(myObject);
newFoo(); //对象 myObject

相关文章

  • JavaScript中this的使用

    js中this的四种用法 参考博文JavaScript中this的四个绑定规则总结 在JavaScript中每一个...

  • javascript中this的四种用法

    this是javaScript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。 t...

  • JavaScript中this用法

    this this是 JavaScript 语言的一个关键字。 它是函数运行时,在函数体内部自动生成的一个对象,只...

  • JavaScript中的this用法

    this在全局中调用时指向的是全局对象。this在函数中调用时指向调用函数的对象,调用函数的在不同情况下有 thi...

  • Javascript中this的用法

    我们在写js时,特别是用到回调函数时,经常会发现this指代的对象总是可能脱离自己的思路而发生改变。面向对象语言的...

  • javascript中的this用法

    前言 this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用...

  • JavaScript中this的用法

    今天去面试,再次被面试官要求解释一下this的用法。但是很遗憾,我对this的理解只局限与把它当成全局变量。因此,...

  • JavaScript中this的用法

    this是 JavaScript 语言的一个关键字。 它是函数运行时,在函数体内部自动生成的一个对象,只能在函数体...

  • JavaScript中forEach的用法相关

    JavaScript中forEach的用法相关 首先说下JavaScript的forEach的标准格式。为数组中的...

  • JavaScript学习(2)call&apply&am

    javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特...

网友评论

      本文标题:javascript中this的四种用法

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