JavaScript基礎 - 語言特性

JavaScript是基于函數的語言，一切都是對象，但又比較特殊

引用

引用是指向實際對象的一個指針和C/C++的指針一樣,C#和java的對象也是引用傳遞

函數重載

// A simple function for sending a message

function sendMessage( msg, obj ) {

    // If both a message and an object are provided

    if ( arguments.length == 2 )

        // Send the message to the object

        obj.alert( msg );

    // Otherwise, assume that only a message was provided

    else

        // So just display the default error message

        alert( msg );

}

// Both of these function calls work

sendMessage( "Hello, World!" );

sendMessage( "How are you?", window );

作用域

作用域是由函數劃分的，而不是塊(Block)劃分，和其他的語言不一樣的地方

// Set a global variable, foo, equal to test

var foo = "test";

// Within an if block

if ( true ) {

    // Set foo equal to 'new test'

    // NOTE: This is still within the global scope!

    var foo = "new test";

// As we can see here, as foo is now equal to 'new test'

alert( foo == "new test" );

// Create a function that will modify the variable foo

function test() {

    var foo = "old test";

// However, when called, 'foo' remains within the scope

// of the function

test();

// Which is confirmed, as foo is still equal to 'new test'

JavaScript全局作用域就是window對象

// A globally-scope variable, containing the string 'test'

var test = "test";

// You'll notice that our 'global' variable and the the

// property of the the window object are identical

alert( window.test == test );

// A function in which the value of foo is set

    foo = "test";

// Call the function to set the value of foo

// We see that foo is now globally scoped

alert( window.foo == "test" );

閉包

閉包意味着内層的函數可以引用存在于包含它的函數内的變量，即使外層函數的執行已經終止

不用産生全局函數：

// Create a new anonymous function, to use as a wrapper

(function(){

    // The variable that would, normally, be global

    var msg = "Thanks for visiting!";

    // Binding a new function to a global object

    window.onunload = function(){

        // Which uses the 'hidden' variable

    };

// Close off the anonymous function and execute it

}());

上下文

this 這個功能在JavaScript中充分發揮

var obj = {

    yes: function(){

        // this == obj

        this.val = true;

    },

    no: function(){

        this.val = false;

    }

};

// We see that there is no val property in the 'obj' object

alert( obj.val == null );

// We run the yes function and it changes the val property

// associated with the 'obj' object

obj.yes();

alert( obj.val == true );

// However, we now point window.no to the obj.no method and run it

window.no = obj.no;

window.no();

// This results in the obj object staying the same (as the context was

// switched to the window object)

// and window val property getting updated.

alert( window.val == false );

以上處理有些不太同一了解，JavaScript提供了call和apply方法實作這個功能：

// A simple that sets the color style of its context

function changeColor( color ) {

    this.style.color = color;

// Calling it on the window object, which fails, since it doesn't

// have a style object

changeColor( "white" );

// Find the element with an ID of main

var main = document.getElementById("main");

// Set its color to black, using the call method

// The call method sets the context with the first argument

// and passes all the other arguments as arguments to the function

changeColor.call( main, "black" );

// A function that sets the color on  the body element

function setBodyColor() {

    // The apply method sets the context to the body element

    // with the first argument, the second argument is an array

    // of arguments that gets passed to the function

    changeColor.apply( document.body, arguments );

// Set the background color of the body to black

setBodyColor( "black" );