的價值「這個」功能

Question

裏面我有一個程序爲：

$(document).ready(function() { 

    this.name = "John"; 
    var someFunc = function() 
    { 
    return this.name; 
    } 
}); 

從我的理解，價值「這」在someFunc是「窗口」，因爲它不以任何包含目的。

我的問題是爲什麼'this'的值是'HtmlDocument'在$(document).ready(function() { alert(this) }？

而且由於someFunc不在$(document).ready函數爲什麼它的值不是'HtmlDocument'？ 在現場發生的事情是什麼導致這個值在不同情況下有所不同？

Answer 1

讀this（https://remysharp.com/2007/04/12/jquerys-this-demystified）例如，對於「本」在Java腳本的簡短概述：

Answer 2

變量this有在JavaScript範圍的一個概念，它的價值取決於你所訪問到它那裏，我想嘗試用一個例子來說明這一點，看看下面的代碼片段：

$("#document").ready(function() { 
 
    console.log("HERE 'this' references to its owner object \"HTMLDocument\""); 
 
    console.log(this.toString()); 
 
    jsFunction(); 
 
    $("#test").jqueryFunction(); 
 
    console.log("You could call jsFunction on window:"); 
 
    window.jsFunction(); 
 
    console.log("But you can't call jqueryFunction on window:"); 
 
    try{ 
 
    window.jqueryFunction(); 
 
    }catch(err){console.log("error");} 
 
    console.log("Neither you could call jsFunction on \"div test\":"); 
 
    try{ 
 
    $("#test").jsFunction(); 
 
    }catch(err){console.log("error");} 
 
    
 
    //Inner functions 
 
    console.log("The same thing applies to inner functions"); 
 
    var innerFunc = function(){ 
 
    console.log(this.toString()); 
 
    
 
    var moreInnerFunc = function(){ 
 
     console.log(this.toString()); 
 
    } 
 
    moreInnerFunc(); 
 
    } 
 
    innerFunc(); 
 
    
 
    (function(){ 
 
    console.log("Immediately-Invoked Function Expression (IIFE)"); 
 
    console.log(this.toString()); 
 
    })(); 
 
    
 
    var extDeclared = externallyDeclared; 
 
    extDeclared(); 
 
    $("#document").extDeclared(); 
 
}); 
 

 
function jsFunction(){ 
 
    console.log("HERE 'this' references to its owner \"window\""); 
 
    console.log(this.toString()); 
 
} 
 

 
(function($){ 
 
$.fn.jqueryFunction = function() { 
 
    console.log("HERE 'this' references to its owner \"div test\""); 
 
    console.log($(this).prop("id")); 
 
}; 
 
})(jQuery); 
 

 
function externallyDeclared(){ 
 
    console.log("externallyDeclared may be window or its other owner"); 
 
    console.log(this.toString()); 
 
} 
 

 
(function($){ 
 
$.fn.extDeclared = externallyDeclared; 
 
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="test" />

正如你所看到的，this總是引用它的「所有者」對象，所以當你在任何類型的對象外聲明一個函數時，它的所有者是window對象，否則它引用定義函數的對象。

總結：

function externallyDeclared(){ 
    console.log("externallyDeclared may be window or its other owner"); 
    console.log(this.toString()); 
} 

(function($){ 
$.fn.extDeclared = externallyDeclared; 
})(jQuery); 

$("document").ready(function(){ 
    var extDeclared = externallyDeclared; 
    extDeclared(); //<-- "no owner" - this=window 
    $("#document").extDeclared(); //<-- "has an owner" - this=its owner 
}); 

我希望我是清楚的，再見。