你不知道的JavaScript让前端飞

What's this?

2017-08-25  本文已影响6人  cce117b0a0ce

What's this?

由于运行期绑定的特性,JavaScript 中的 this 含义非常多,它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式

随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象

作为函数调用

在函数被直接调用时this绑定到全局对象。在浏览器中,window 就是该全局对象

console.log(this);  //Window

function fn1(){
    function fn2(){
      console.log(this);
    }
}

fn1();  //Window

嵌套调用

函数嵌套产生的内部函数的this不是其父函数,仍然是全局变量

console.log(this);  //Window

function fn1(){
    function fn2(){
      console.log(this);
    }
    fn2()
}

fn1();  //Window

setTimeout、setInterval

获取document:

document.addEventListener('click', function(e){
  console.log(this);
  var _this = this;
  setTimeout(function(){
      console.log(_this);
  }, 200);
}, false);

作为对象方法调用

在 JavaScript 中,函数也是对象,因此函数可以作为一个对象的属性,此时该函数被称为该对象的方法,在使用这种调用方式时,this 被自然绑定到该对象

var obj1 = {
    name: 'Byron',
    fn : function(){
        console.log(this);
    }
};

obj1.fn();//Object {name: "Byron", fn: function}

var fn2 = obj1.fn;

fn2(); //window,相当于window.fn2()

Function.prototype.bind

bind,返回一个新函数,并且使函数内部的this为传入的第一个参数

document.addEventListener('click', function(e){
  console.log(this);
  setTimeout(function(){
      console.log(this);
  }.bind(this), 200);
}, false);

使用call和apply设置this

    var value = 100;
    var obj = {
        value: 200
    }

    function fn(a,b){
        console.log(this.value + a + b)
    }

    fn(3,4) //107

    fn.call(obj,3,4)    //207
    fn.apply(obj, [3,4])  //207

得到一个数组的最大值

var arr = [1,3,12,3]
console.log( Math.max.apply(null, arr) )  //12

拼接字符串

    function joinStr(){
        //1.
        console.log( Array.prototype.join.call(arguments, '-'))
        //2.
        var join = Array.prototype.join.bind(arguments);
        console.log(join('-'))
    }

    joinStr('a','b','c')

三种变量

function ClassA(){
    var a = 1; //私有变量,只有函数内部可以访问
    this.b = 2; //实例变量,只有实例可以访问
}

ClassA.c = 3; // 静态变量,也就是属性,类型访问

console.log(a); // error
console.log(ClassA.b) // undefined
console.log(ClassA.c) //3

var classa = new ClassA();
console.log(classa.a);//undefined
console.log(classa.b);// 2
console.log(classa.c);//undefined
上一篇下一篇

猜你喜欢

热点阅读