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
网友评论