美文网首页
JavaScript中的this

JavaScript中的this

作者: _LG_ | 来源:发表于2016-09-25 22:56 被阅读22次

JavaScript中的this的指向在函数定义时,是不确定的。只有在函数运行的时候才能确定this指向谁。this可以是全局对象,当前对象或者任意对象。取决于函数的调用方式。JavaScript中函数调用的方式如下:作为对象方法调用,作为函数调用,作为构造函数调用和使用apply,bind调用。

全局中的this

  • 浏览器中的this
console.log(this);//window对象
  • node中的this
console.log(this);//{}

作为对象方法调用

当一个函数作为一个对象的属性时,此时这个函数称为对象的方法,当方法被调用时,this指向该对象。

var person = {
      name: 'susan',    
      sex: 'woman',    
      say: function () {        
               console.log(this.name); //susan
      }
};

person.say();

但是当per.say该方法赋值给一个变量时,this发生变化了,this指向window对象

var person = {
    name: 'susan',    
    sex: 'woman',    
    say: function () {        
          console.log(this.name); //undefined
          console.log(this);//global对象
      }
};

var say = person.say;
say();

作为函数调用

在作为函数调用时,this在node中输出为global对象(非严格模式),在浏览器中输出为window对象。在严格模式中this输出为undefined。

function say() {
    console.log(this);//global对象(node)或者 window对象(浏览器)
}

say();

作为构造函数调用

作为构造函数调用时,this指向了构造函数调用时实例化出的对象。

function Say(name) {    
       this.name = name;    
      console.log(this.name);//susan 
      console.log(this);//this指向Say{name:'susan'}对象
}

var say = new Say('susan');

call调用和apply调用

当call调用和apply调用时,更改了this的指向。使this指向了person对象。

var person = {   
    name:'susan'
};
function say() {    
     console.log(this.name);
}

say.apply(person);
say.call(person);

call调用和bind调用

function Say(name) {    
    this.name = name;   
    console.log(this.name);
}
var person = {    
    name:'Tom'
};
var say = new Say.call(person);
say();

TypeError: Say.call is not a constructor,因为new了Say.call函数而不是Say。

function Say(name) {  
    this.name = name;    
    console.log(this.name);
}
var person = {   
    name:'Tom' 
};
var say1 = Say.bind(person);
var say2 = new say1('susan');

当使用了bind时,this.name仍是susan,由此可以看出bind绑定并没有改变this的指向。

箭头函数指定 this

var person = (name)=> {   
    console.log(name);//susan  
    console.log(this); //{}(node)或者 window对象(浏览器)
};
person('susan');

var person2 = {    
    name: 'Tom'
};
person.call(person2, 'Tom');

上文中的call调用并没有改变this的指向。从此可以得出箭头函数中的this在定义的时候,已经决定了他的指向,与在哪里调用及如何调用它无关。包括(call,apply,bind)等操作都无法改变this的指向。

相关文章

  • 1body中添加js

    1 中的 JavaScript JavaScript 函数和事件上面例子中的 JavaScript 语句,会...

  • JS中的类型转换

    JavaScript 中的类型转换 JavaScript 基本数据类型 JavaScript 中的一共有 8 中内...

  • js中的this

    javascript中的this javascript中的this与java中的this有点不同。ECMAScri...

  • JavaScript中的字符串

    @(javascript)[js字符串][toc] JavaScript中的字符串 字符串是JavaScript中...

  • 06-JavaScript数组和函数

    JavaScript数组 JavaScript中的数组可以存储不同类型的数据 JavaScript中的数组是引用类...

  • Client's JavaScript

    什么是JavaScript? JavaScript的运行环境? 浏览器中JavaScript可以做什么? 浏览器中...

  • javascript中的this

    一般说到JS的this,都会想起在函数中变来变去的this。但是事情的发生都是有规则的约束,JS中的this也不例...

  • JavaScript中的this

    什么是this? 首先对this的下个定义:this是在执行上下文创建时确定的一个在执行过程中不可更改的变量。th...

  • JavaScript中的this

    JavaScript中的this很容易让人迷惑,但弄清楚后其实还是很好区分的。JavaScript中的this总是...

  • javascript中的this

    在javascript中的this大致可以理解成谁调用的this就指向谁 全局环境中的this 函数中的this ...

网友评论

      本文标题:JavaScript中的this

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