浓密浅出js中的this(一)

出于常常函数的调用,this的值指向window。所以举行this.x的时候一定于实践了window.x,故window.x的值为2。

函数被call,apply,bind调用的时候

 

function warrior(speed, strength){
   console.log(
      "Warrior: " + this.kind +
      ", weapon: " + this.weapon +
      ", speed: " + speed +
      ", strength: " + strength
  );
}

var warrior1 = {
   kind: "ninja",
   weapon: "shuriken"
};

var warrior2 = {
   kind: "samurai",
   weapon: "katana"
};

warrior.call(warrior1, 9, 5);   // Warrior: ninja, weapon: shuriken, speed: 9, strength: 5
warrior.apply(warrior2, [6, 10]);   // Warrior: samurai, weapon: katana, speed: 6, strength: 10
var obj = {
    x : 100,
    y : function(){
        setTimeout(
            function(){ console.log(this.x); }    
         , 1000);
    }
};

obj.y();  // undefined

注:bind方法和call,apply的分别在于,bind()
之后函数并不曾实施,能够传给其余函数,在某个适当的机会再调用。

function Message(content){
   this.content = content;
   this.showContent = function(){
       console.log(this.content);
   };
}

var message = new Message("I'm a message!");
message.showContent();   // I'm a message!

 再看看上面这一个栗子。

在非严俊情势下,由于this必须是一个对象,所以就默许为针对全局对象window。在严刻格局下,上面的代码则会并发分化的结果,如下:

 

Q:this的应用情形?

apply()方法接收七个参数:
第三个是要设置为this的杰出目的,首个参数是可选的,若是要传播参数,则封装为数组作为apply()的首个参数即可。

function warrior(kind){
   console.log(
      "Warrior: " + kind +
      ". Favorite weapon: " + this.weapon +
      ". Main mission: " + this.mission
   );
}

var attributes = {
   weapon: "shuriken",
   mission: "espionage"
};

var ninja = warrior.bind(attributes, "ninja");

ninja();   // Warrior: ninja. Favorite weapon: shuriken. Main mission: espionage

有木有看出哪些?当一个富含return重返值的函数作为社团器去new一个新的靶羊时,return的值是被忽略的。是或不是很神奇!

  3.作为构造函数调用。

var obj = {
    x: 1,
    showX: function() {
        console.log(this.x)
    }
}
obj.showX();  // 1

var obj1={x:11};
obj1.showX=obj.showX;
obj1.showX();  // 11


show=function(){
    console.log('show'+this.x);    
}

obj1.showX=show;
obj1.showX();   // show11

作为构造函数调用

  2.当做对象的艺术来调用。

 

  在率先个函数调用中,大家选取call() 方法来将this设置为warrior1对象,
并传入必要的其余参数, 参数间用逗号分隔。在第三个函数调用中,
其实都大致, 只是流传的是warrior2对象, 并将需要参数封装为一个数组。

具有的函数都有apply()和call()那八个主意。大家得以因此那多个章程来改变函数的上下文,
在其他时候都有效, 用来显式地设置this的值。

ECMAScript,作为目标的措施来调用

function obj(){
    this.a=666;
    return 'abc';
}

var obj=new obj();
console.log(obj);  // obj{a: 666} 

A:  1.平日函数调用。

  在上头,我们透过对结构器warrior()传入分化的参数创立分化种类的对象,
this将针对大家通过call() 和/或 apply()传入的目标。

function test1(){
  "use strict";
  console.log(this); 
} 
test1(); // undefined

  下边栗子中,在obj对象中,匿名函数在宣称时就当做obj对象的一个特性,this直接指向obj对象。函数show在宣称时是一个大局函数,函数里面的this指向window,但当最终作为对象obj1的一个性质时,其this便指向了对象obj1。不过,请留心,并不是具有函数作为对象的艺术来调用时,this都会针对调用者,如下:

 

function test1(){
  console.log(this);
}
test1();   // window
var message = {
  content: "I'm a message!",
  showContent: function() {
    console.log(this.content);
  }
};

message.showContent();   // I'm a message!

一般说来函数调用

function test2(){
    this.x=2;
}
test2();
console.log(window.x);   // 2

在那几个栗子中, bind()方法的施用方法依然相仿的,
但warrior.bind()创立了一个新的函数(方法体和成效域跟warrior()一样),并从未改变原来的warrior()函数。新函数的效能和老的一律,
只是绑定到了attributes对象。

A:this是Javascript语言的一个重中之重字,它代表函数运行时,自动生成的一个内部对象,在每个
function 中自行根据功用域(scope) 确定, 指向的是此次调用者。

栗子:

var obj = {
    x : 100,
    y : function(){
        var that = this;
        setTimeout(
            function(){ console.log(that.x); }
         , 1000);
    }
};

obj.y();   // 100

  上边栗子是将函数保存为目的的品质, 那样就转会为一个艺术,
可以透过对象调用那一个格局。而当函数被当成对象的法门来调用时, 里面的 this
值就被装置为调用方法的指标。其实,不管被调用函数在宣称时是属于方法,依然函数,当最终作为对象的不二法门来调用时,this都是指向方法的调用者,即母体对象。看看下边的栗子你就精通了。

call()方法和apply()基本上是相同的,除了前面的参数不是数组,而是散落开一个一个地附加在背后。

 

当一个函数作为构造器使用时(通过new关键字),它的this值绑定到新创立的充裕目的。

  除了call()和apply()以外,ECMAScript
5还扩张了bind()方法,在调用一个函数或方法时也足以经过bind方法来绑定this对象。让大家看上边的栗子:

  4.函数被call,apply,bind调用的时候。

再看看上面那段代码:

Q:this是什么?

 

上边栗子中的this指向的是window对象,并不是我们希望的obj,所以会弹出undefined。所以在书写这类代码时,尽量防止那种写法,当然,你也足以在调用的时候将立即的this所针对的目的存在一个变量里,等到定时器运行时再用所存的变量去调用x,如下: