理解 JavaScript 作用域（转）

var name = ‘Hammad‘;
 
console.log(name); // logs ‘Hammad‘
 
function logName() {
    console.log(name); // ‘name‘ is accessible here and everywhere else
}
 
logName(); // logs ‘Hammad‘

// Global Scope
function someFunction() {
    // Local Scope ##1
    function someOtherFunction() {
        // Local Scope ##2
    }
}
 
// Global Scope
function anotherFunction() {
    // Local Scope ##3
}
// Global Scope

if (true) {
    // this ‘if‘ conditional block doesn‘t create a new scope
    var name = ‘Hammad‘; // name is still in the global scope
}
 
console.log(name); // logs ‘Hammad‘

var name = ‘Hammad‘;
 
let likes = ‘Coding‘;
const skills = ‘Javascript and PHP‘;

if (true) {
    // this ‘if‘ conditional block doesn‘t create a scope
 
    // name is in the global scope because of the ‘var‘ keyword
    var name = ‘Hammad‘;
    // likes is in the local scope because of the ‘let‘ keyword
    let likes = ‘Coding‘;
    // skills is in the local scope because of the ‘const‘ keyword
    const skills = ‘JavaScript and PHP‘;
}
 
console.log(name); // logs ‘Hammad‘
console.log(likes); // Uncaught ReferenceError: likes is not defined
console.log(skills); // Uncaught ReferenceError: skills is not defined

// logs: Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage…}
console.log(this);
 
function logFunction() {
    console.log(this);
}
// logs: Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage…}
// because logFunction() is not a property of an object
logFunction();

class User {
    logName() {
        console.log(this);
    }
}
 
(new User).logName(); // logs User {}

function logFunction() {
    console.log(this);
}
 
new logFunction(); // logs logFunction {}

variableObject‘: {
    // contains function arguments, inner variable and function declarations
}

‘scopeChain‘: {
    // contains its own variable object and other variable objects of the parent execution contexts
}

executionContextObject = {
    ‘scopeChain‘: {}, // contains its own variableObject and other variableObject of the parent execution contexts
    ‘variableObject‘: {}, // contains function arguments, inner variable and function declarations
    ‘this‘: valueOfThis
}

function grandfather() {
    var name = ‘Hammad‘;
    // likes is not accessible here
    function parent() {
        // name is accessible here
        // likes is not accessible here
        function child() {
            // Innermost level of the scope chain
            // name is also accessible here
            var likes = ‘Coding‘;
        }
    }
}

function greet() {
    name = ‘Hammad‘;
    return function () {
        console.log(‘Hi ‘ + name);
    }
}
 
greet(); // nothing happens, no errors
 
// the returned function from greet() gets saved in greetLetter
greetLetter = greet();
 
// calling greetLetter calls the returned function from the greet() function
greetLetter(); // logs ‘Hi Hammad‘

function greet() {
    name = ‘Hammad‘;
    return function () {
        console.log(‘Hi ‘ + name);
    }
}
 
greet()(); // logs ‘Hi Hammad‘

	
// Public Scope
public $property;
public function method() {
  // ...
}
 
// Private Sccpe
private $property;
private function method() {
  // ...
}
 
// Protected Scope
protected $property;
protected function method() {
  // ...
}

(function () {
  // private scope
})();

var Module = (function() {
    function privateMethod() {
        // do something
    }
 
    return {
        publicMethod: function() {
            // can call privateMethod();
        }
    };
})();

Module.publicMethod(); // works
Module.privateMethod(); // Uncaught ReferenceError: privateMethod is not defined

var Module = (function () {
    function _privateMethod() {
        // do something
    }
    function publicMethod() {
        // do something
    }
    return {
        publicMethod: publicMethod,
    }
})();

(function(window) {
    // do anything
})(this);

function hello() {
    // do something...
}
 
hello(); // the way you usually call it
hello.call(context); // here you can pass the context(value of this) as the first argument
hello.apply(context); // here you can pass the context(value of this) as the first argument

function introduce(name, interest) {
    console.log(‘Hi! I‘m ‘+ name +‘ and I like ‘+ interest +‘.‘);
    console.log(‘The value of this is ‘+ this +‘.‘)
}
 
introduce(‘Hammad‘, ‘Coding‘); // the way you usually call it
introduce.call(window, ‘Batman‘, ‘to save Gotham‘); // pass the arguments one by one after the contextt
introduce.apply(‘Hi‘, [‘Bruce Wayne‘, ‘businesses‘]); // pass the arguments in an array after the context
 
// Output:
// Hi! I‘m Hammad and I like Coding.
// The value of this is [object Window].
// Hi! I‘m Batman and I like to save Gotham.
// The value of this is [object Window].
// Hi! I‘m Bruce Wayne and I like businesses.
// The value of this is Hi.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Things to learn</title>
</head>
<body>
    <h1>Things to Learn to Rule the World</h1>
    <ul>
        <li>Learn PHP</li>
        <li>Learn Laravel</li>
        <li>Learn JavaScript</li>
        <li>Learn VueJS</li>
        <li>Learn CLI</li>
        <li>Learn Git</li>
        <li>Learn Astral Projection</li>
    </ul>
    <script>
        // Saves a NodeList of all list items on the page in listItems
        var listItems = document.querySelectorAll(‘ul li‘);
        // Loops through each of the Node in the listItems NodeList and logs its content
        for (var i = 0; i < listItems.length; i++) {
          (function () {
            console.log(this.innerHTML);
          }).call(listItems[i]);
        }
 
        // Output logs:
        // Learn PHP
        // Learn Laravel
        // Learn JavaScript
        // Learn VueJS
        // Learn CLI
        // Learn Git
        // Learn Astral Projection
    </script>
</body>
</html>

(function introduce(name, interest) {
    console.log(‘Hi! I‘m ‘+ name +‘ and I like ‘+ interest +‘.‘);
    console.log(‘The value of this is ‘+ this +‘.‘)
}).bind(window, ‘Hammad‘, ‘Cosmology‘)();
 
// logs:
// Hi! I‘m Hammad and I like Cosmology.
// The value of this is [object Window].