this的默认绑定、隐式绑定、显示绑定、new绑定
<script> //全局变量obj_value var obj_value=1; //1、window调用 console.log(`***************************1***************************`) function fn(){ console.log("obj_value",this.obj_value); } fn(); //输出obj_value=1 //2、obj对象显式调用 console.log(`***************************2***************************`) var obj={ obj_value:2, fire:function(){ console.log("obj_value",this.obj_value); } } obj.fire(); //obj对象没有丢失绑定,输出obj_value=2 //3、obj对象隐式调用 console.log(`***************************3***************************`) function fn_fire(){ console.log("obj_value",this.obj_value); } var obj={ obj_value:2, fire:fn_fire //隐式调用外部的function } obj.fire(); //虽然隐式调用,但是obj对象没有丢失绑定,输出obj_value=2 //4、间接隐式/显示调用obj对象的方法、 console.log(`***************************4***************************`) function fn_fire(){ console.log("obj_value",this.obj_value); } var obj={ obj_value:2, fire:fn_fire //隐式调用外部的function } obj.fire(); //虽然隐式调用,但是obj对象没有丢失绑定,输出obj_value=2 var other_fire=obj.fire; other_fire();//间接调用obj的方法,导致obj对象丢失,重新获取window对象,obj_value=1 //5、obj对象丢失,使用call、apply、bind重新绑定obj对象, //call/apply跟bind的区别是, // call/apply会直接执行函数,bind不执行函数,只返回一个可供执行的函数 console.log(`***************************5***************************`) function fn_fire(){ console.log("obj_value",this.obj_value); } var obj={ obj_value:2, fire:fn_fire //隐式调用外部的function } var other_fire=obj.fire; other_fire();//间接调用obj的方法,导致obj对象丢失,重新获取window对象,obj_value=1 other_fire.call(obj);//虽然间接绑定,但是使用call绑定了obj对象,obj_value=2 other_fire.apply(obj);//apply跟call作用一样,obj_value=2 var bind_fire=other_fire.bind(obj);//使用bind绑定obj对象,返回一个function bind_fire();//obj_value=2 //6、new绑定,this都是指定当前对象 console.log(`***************************6***************************`) var obj={ fire:function(param1){ this.obj_value=param1; } } var new_obj=new obj.fire(3); //新建obj.fire()对象,this将是其fire()本身 console.log("obj_value",new_obj.obj_value)//输出obj_value=3 console.log("obj_value",this.obj_value)//输出obj_value=1 </script>
输出