美文网首页
笔记1(this)

笔记1(this)

作者: YangJeremy | 来源:发表于2017-09-24 23:53 被阅读0次
var a=1;
function fn1(){
console.log(a)      //输出的是1
 var b=2
console.log(this.b)}   //这个b是全局下的b,而这里没有,所以是undefined

fn1()    //由于这个函数没有return出东西,默认是undefined

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

function fn0(){
    function fn(){
          console.log(this)
     }
     fn()
}

fn0();

setTimeout、setInterval
这两个函数执行的函数this也是全局对象

document.addEventListener('click',function(e){
     console.log(this);
     setTimeout(function(){
           console.log(this)
     },200)
},false)
document.addEventListener('click',function(e){
     console.log(this);
     var _this=this;
     setTimeout(function(){
           console.log(_this)  //这种情况下this指向document
     },200)
},false)

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

var obj1={
    name: 'Byron',     //要注意这个必须是逗号,否则会报错
    fn:function(){
        console.log(this)
    }
 }
obj1.fn();  //输出Object {name: "Byron"}

var fn2=obj1.fn;
fn2();        //这种情况下,相当于window.fn2(),因此输出的是window

var obj2={
    name: 'Byron',     
    obj3:{
        fn:function(){
            console.log(this)
        }      
    }
 }
obj2.obj3.fn();   //输出的是一个空对象Object{},是他的最后一次的调用者

Dom对象绑定事件中的this,代表事件源的DOM对象(低版本IE有BUG,指向了window)

任何函数都有一个bind方法
bind,返回一个新函数,并且使函数内部的this为传入的第一个参数

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

var obj3={a:3}
var fn3=obj1.fn.bind(obj3)
fn3();    //输出Object {a: 3},通俗的理解就是把obj1的fn这个方法拿给obj3使用,this指向obj3

那么这样的话,下面这个例子

document.addEventListener('click',function(e){
     console.log(this);
     setTimeout(function(){
           console.log(this)
     }.bind(this),200)     //this的值变成了指向document
},false)

使用call和apply设置this
call apply,调用一个函数,传入函数执行上下文及参数

语法:
fn.call(context, param1, param2...)

fn.apply(context, paramArray)

第一个参数都是希望设置的this对象,不同之处在于call方法接收参数列表,而apply接收参数数组

例子:

var value=100;
var obj4={
   value: 200
}
function fn4(a,b){
   console.log(this.value+a+b)
}
fn4(3,4)   //输出107    它的this是window(全局变量)
fn4.call(obj4,3,4)   //输出207  在这里this是obj4,相当于是obj4调用了fn4这个函数
fn4.apply(obj4,[3,4])  //这是apply和call的区别,apply需要将参数以数组的形式去写

所以我们才会有这个使用方法:Math.max.apply(null,arr)
相当于借用了Math的apply方法,而this值不变

function joinStr(){
    console.log(Array.prototype.join.call(arguments))
    console.log(Array.prototype.join.call(arguments,'-'))//以中横线做连接的写法
}
joinStr('a','b','c')
可以这么写:
function joinStr(){
  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

相关文章

网友评论

      本文标题:笔记1(this)

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