说出this的三个应用

Posted 2020-08-13

1.this是javascript中的一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
 2.随着函数使用场合的不同，this的值会发生变化，但是有一个原则，就是this指的是调用函数的那个对象。
 3.this分类
 1）纯粹的函数调用
 这时的this指向window。（函数没有所属对象：指向全局对象）
 eg:
 var x=1;
 function test(){
 alert(this.x);
 }
 test();

 2)作为对象方法的调用
 这时的this指向上级对象。（函数有所属对象时：指向所属对象）
 eg:
 function test(){
 alert(this.x)
 }
 var o={};
 o.x=1;
 o.m=test;
 o.m();
 3)作为构造函数调用
 构造函数，就是通过这个函数生成一个新对象。这时的this指向这个新对象。（构造器中的 this：指向新对象）
 eg:
 function test(){
 this.x=1;
 }
 var o=new test();
 alert(o.x);



 var x=2;
 function test(){
 this.x=1;
 }
 var o=new test();
 alert(x);



 function foo(){return this.a};
 var a=2;
 var o={a:3,foo:foo};
 var p={a:4};
 console.log(o.foo());
 p.foo=o.foo;
 console.log(p.foo());
 console.log(foo());

 4)apply或者call的调用
 是改变函数对象的一个方法，作用是改变函数的调用对象。
 eg:
 var x=0;
 function test(){
 alert(this.x);
 }
 var o={};
 o.x=1;
 o.m=test;
 o.m();
 o.m.apply();

例题

//1
 var point={
     x:0,
     y:0,
     moveTo:function(x,y){
         this.x=this.x+x;    
         this.y=this.y+y;    
         alert(this.x);    //1
          alert(this.y);  //1
     }
 }
 point.moveTo(1,1);

 //2
    var myObject = {value: 100};
    myObject.getValue = function () {
        console.log(this.value);
        console.log(this);
        return this.value;
    };
    console.log(myObject.getValue());   // 100 object{value: 100} 100 

 //3
    var myObject = {value: 100};
    myObject.getValue = function () {
        var foo = function () {
            console.log(this.value);
            console.log(this);
        };
        foo();
        return this.value;
    };
    console.log(myObject.getValue());  //undefined window 100

 //4
    var SomeClass = function(){
        this.value = 100;
    }
    var myCreate = new SomeClass();
    console.log(myCreate.value);     //100

 //5
    var myObject = {value: 100};
    var foo = function(){
        console.log(this);
    };
    foo();          //window
    foo.apply(myObject);  //object{value: 100}
    foo.call(myObject);   //object{value: 100}

 //6
var name = "clever coder";
var person = {
    name : "foocoder",
    hello : function(sth){
        var sayhello = function(sth) {
            console.log(this.name + " says " + sth);
        };
        sayhello(sth);
    }
}
person.hello("hello world");  //clever coder says hello world

 //7
var name = "clever coder";
var person = {
    name : "foocoder",
    hello : function(sth){
        var that = this;
        var sayhello = function(sth) {
            console.log(that.name + " says " + sth);
        };
        sayhello(sth);
    }
}
person.hello("hello world");  ////foocoder says hello world

//1
 var point={
     x:0,
     y:0,
     moveTo:function(x,y){
         this.x=this.x+x;
         this.y=this.y+y;
         console.log(this.x);
         console.log(this.y);
     }
 };
 point.moveTo(1,1);  //1 1

//2
   var myObject = {value: 100};
   myObject.getValue = function () {
       console.log(this.value);
       console.log(this);
       return this.value;
   };
   console.log(myObject.getValue());  //100 object 100

//3
   var myObject = {value: 100};
   myObject.getValue = function () {
       var foo = function () {
           console.log(this.value);
           console.log(this);
       };
       foo();
       return this.value;
   };
   console.log(myObject.getValue());//undefined window 100

//4
   var SomeClass = function(){
       this.value = 100;
   }
   var myCreate = new SomeClass();
   console.log(myCreate.value);  //100

//5
   var myObject = {value: 100};
   var foo = function(){
       console.log(this);
   };
   foo();   //window
   foo.apply(myObject);//Object
   foo.call(myObject); //Object

 //6
var name = "clever coder";
var person = {
    name : "foocoder",
    hello : function(sth){
        var sayhello = function(sth) {
            console.log(this.name + " says " + sth);
        };
        sayhello(sth);
    }
}
person.hello("hello world");  //clever coder says hello world

 //7
var name = "clever coder";
var person = {
    name : "foocoder",
    hello : function(sth){
        var that = this;
        var sayhello = function(sth) {
            console.log(that.name + " says " + sth);
        };
        sayhello(sth);
    }
}
person.hello("hello world");  //foocoder says hello world

//8
var name="window";
var Bob={
    name:"Bob",
    showName:function(){
        alert(this.name);
    }
};
var Tom={
    name:"Tom",
    showName:function(){
        var fun=Bob.showName;
        fun();
    }
}
Tom.showName();  //window

//9
var name="Bob";
var nameObj={
    name:"Tom",
    showName:function(){
        alert(this.name);
    },
    waitShowName:function(){
        !function(__callback){
            __callback();
        }(this.showName);
    }
}
nameObj.waitShowName(); //Bob

 var name="Bob";
 var nameObj={
     name:"Tom",
     showName:function(){
         alert(this.name);
     },
     waitShowName:function(){
         var that=this;
         setTimeout(function(){
             that.showName();
         },1000);
     }
 };
nameObj.waitShowName(); //Tom