1. 程式人生 > >js this sleep

js this sleep

出處:http://www.cnblogs.com/onepixel/p/5036369.html

4、this 關鍵字

在一個函式中,this總是指向當前函式的所有者物件,this總是在執行時才能確定其具體的指向, 也才能知道它的呼叫物件。

12345678window.name = "window";function f(){console.log(this.name);}f();//windowvar obj = {name:'obj'};f.call(obj); //obj

在執行f()時,此時f()的呼叫者是window物件,因此輸出 window 

f.call(obj) 是把f()放在obj物件上執行,相當於obj.f(),此時f 中的this就是obj,所以輸出的是 obj

5、實戰應用

demo1

1234567891011var foo = "window";var obj = {foo : "obj",getFoo : function(){return function(){return this.foo;};}};var f = obj.getFoo();f(); //window

demo2

123456789101112var foo = "window";var obj = {foo : "obj",getFoo : function(){var that = this;return function(){return that.foo;};}};var f = obj.getFoo();
f(); //obj

6、程式碼解析

123456789101112131415//demo1://執行var  f = obj.getFoo()返回的是一個匿名函式,相當於:var f = function(){return this.foo;}//f() 相當於window.f(), 因此f中的this指向的是window物件,this.foo相當於window.foo, 所以f()返回"window" //demo2://執行var f = obj.getFoo() 同樣返回匿名函式,即:var f = function(){return that.foo;}//唯一不同的是f中的this變成了that, 要知道that是哪個物件之前,先確定f的作用域鏈:f->getFoo->window 並在該鏈條上查詢that,
//此時可以發現that指代的是getFoo中的this, getFoo中的this指向其執行時的呼叫者,//從var f = obj.getFoo() 可知此時this指向的是obj物件,因此that.foo 就相當於obj.foo,所以f()返回"obj"

一、函式呼叫,此時this是全域性的也就是window


1 var c=function(){
2    alert(this==window)
3   }
4   c()//true

二、方法呼叫

複製程式碼
var myObj={
  value:2,
  inc:function(num){
   alert(this.value+num);
  }
 }
 myobject.inc(1); //結果3,因為this指向myObj
複製程式碼

注意:內部匿名函式不屬於當前物件的函式,因此this指向了全域性物件window

複製程式碼
var myObj={
   name:'myObject',
   value:0,
   increment:function(num){
    this.value += typeof(num) ==='number'? num:0;
   },
   toString:function(){
    return '[object:'+this.name+'{value:'+this.value+'}]';
   },
  
   getInfo:function(){
      return (function(){
        return this.toString();//內部匿名函式不屬於當前物件的函式,因此this指向了全域性物件window
      })();
  }
 }
alert(myObj.getInfo());//[object window];
複製程式碼
解決方法:
複製程式碼
 var myObj={
  name:'myObject',
  value:0,
  increment:function(num)   {
   this.value += typeof(num) ==='number' ? num : 0;
  },
  toString:function()   {
    return '[object:'+this.name+'{value:'+this.value+'}]';
  },
  getInfo:function(){
   var This=this;//先把當前的this指向存起來
   return (function(){ 
      return This.toString();
   })();
  }
 }
alert(myObj.getInfo());//[Object:myObject {value:0}]
複製程式碼
三、用new關鍵字來新建一個函式物件的呼叫,this指向被繫結到建構函式的例項上
複製程式碼
 var fn = function (status){
  this.status = status;
 }
 fn.prototype.get_status = function(){
   return this.status;
 }
 var test = new fn('my status');
 alert(test.get_status);//my status,this指向test
複製程式碼
四、apply/call呼叫
複製程式碼
function MyObject(name){
   this.name=name ||'MyObject';
   this.value=0;
   this.increment=function(num){
   this.value += typeof(num) === 'number' ? num : 0;
  };
  this.toString=function(){
    return '[Object:'+this.name+' {value:'+this.value+'}]';
  };
   this.target=this;
 }
 function getInfo(){
   return this.toString();
 }
 var myObj=new MyObject();
 alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj
 alert(getInfo.apply(window));//[object Window],this指向window
複製程式碼
通過call和apply可以重新定義函式的執行環境,即this的指向,這對於一些應用當中是十分常用的

call,apply, bind 和 this

關於Javascript的this指標,和C++/Java很類似。 我們來看個示例:(這個示例很簡單了,我就不多說了)

12345678910111213function print(text){document.write(this.value + ' - ' + text+ '<br>');}var a = {value: 10, print : print};var b = {value: 20, print : print};print('hello');// this => global, output "undefined - hello"a.print('a');// this => a, output "10 - a"b.print('b'); // this => b, output "20 - b"a['print']('a'); // this => a, output "10 - a"

我們再來看看call 和 apply,這兩個函式的差別就是引數的樣子不一樣,另一個就是效能不一樣,apply的效能要差很多。(關於效能,可到 JSPerf 上去跑跑看看)

12345print.call(a, 'a'); // this => a, output "10 - a"print.call(b, 'b'); // this => b, output "20 - b"print.apply(a, ['a']); // this => a, output "10 - a"print.apply(b, ['b']); // this => b, output "20 - b"

但是在bind後,this指標,可能會有不一樣,但是因為Javascript是動態的。如下面的示例

1234var p = print.bind(a);p('a');             // this => a, output "10 - a"p.call(b, 'b');     // this => a, output "10 - b"p.apply(b, ['b']);  // this => a, output "10 - b"

出處:https://www.cnblogs.com/souliid/p/6005675.html

sleep()

function sleep(numberMillis) {
var now = new Date();
var exitTime = now.getTime() + numberMillis;
while (true) {
now = new Date();
if (now.getTime() > exitTime)
return;
}
}