javascript高程3 學習筆記(三)

avwu 發(fā)布于2019-08-22 10:56 / 1448人閱讀

摘要：與執(zhí)行環(huán)境相關的變量對象中有執(zhí)行環(huán)境定義的所有變量和函數(shù)作用域鏈代碼在一個環(huán)境中執(zhí)行，便會創(chuàng)建變量對象的一個作用域鏈。

執(zhí)行環(huán)境

執(zhí)行環(huán)境是什么？

  
javascript的解釋器每次開始執(zhí)行一個函數(shù)時，都會為每個函數(shù)創(chuàng)建一個執(zhí)行環(huán)境（execution context）。
  執(zhí)行環(huán)境定義了變量或者函數(shù)有權訪問的其他數(shù)據(jù)，決定了他們各自的行為。
  與執(zhí)行環(huán)境相關的變量對象(ariable object)中有執(zhí)行環(huán)境定義的所有變量和函數(shù)

作用域鏈

  
代碼在一個環(huán)境中執(zhí)行，便會創(chuàng)建變量對象的一個作用域鏈(scope chain)。
  作用域鏈的作用是，保證對執(zhí)行環(huán)境有權訪問的所有變量和函數(shù)的有序訪問

  如果環(huán)境是函數(shù)，則其活動對象(active object)為環(huán)境變量
  活動對象最開始含有一個變量，名為arguments對象(該變量全局中不存在)
  作用域鏈的下一個對象來自包含對象，再下一個對象來自下一個包含環(huán)境...
  標識符的解析是沿著作用域鏈逐級向上搜索標識符的過程
  通過try catch/with 來延長作用域
  沒有塊級作用域（類C的花括號）

代碼示例

var color = "blue";

function changeColor(){
    if(color == "blue"){
        color = "red";
    }else{
        color = "blue";
    }
}
changeColor();
alert(color); // red

var color = "blue";

function changeColor(){
    var anotherColor = "red";

    function swapColor(){
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
  // 能訪問 color和anotherColor,tempColor
    }
// 能訪問 color和anotherColor
    swapColor();
    alert(color);
    alert(anotherColor);
}
// 能訪問 color 
changeColor();
alert(color);
alert(anotherColor);  //不能被訪問到 undefined


####js 垃圾回收 Garbage Collection(GC)
> - javascript具有自動垃圾回收機制
- 兩種策略，標記清除和引用計數(shù)
?- 標記清除(較為常見)，第一遍標記所有變量，第二次標記待清除變量
- 引用計數(shù)，通過檢測變量引用次數(shù)的值判定是否變量可以被回收，問題是存在循環(huán)引用問題

####Function 類型
> - 每個函數(shù)都是Function類型的實例
- 函數(shù)是對象，具有屬性和方法，函數(shù)名實際上便是指向函數(shù)對象的指針
- 函數(shù)定義的三種方式 
- 函數(shù)沒有重載，后定義的會覆蓋之前的
- 將函數(shù)名作為變量進行傳參
- 函數(shù)的兩個內部屬性**`arguments`**和**`this`**還有一個**`caller`**
- 函數(shù)的屬性(有個疑問，和內部屬性什么區(qū)別么)，兩個`length`(參數(shù)個數(shù))和`prototype`
- 兩個非繼承方法`apply()` `call()`


####代碼示例
*函數(shù)的三種定義方式*


// 函數(shù)定義的三種方式
// 函數(shù)聲明
function sum(num1,num2){
    return num1 + num2;
}

// 函數(shù)表達式
var sum  = function(num1,num2){
    return num1 + num2;
};

// 使用Function構造函數(shù)  兩次代碼解析性能慢 不推薦
var sum = new Function("num1","num2","return num1 + num2");

?*函數(shù)聲明提升(function declaration hositing)*


// 可以訪問sum
alert(sum(10,10));
function sum(num1,num2){
    return num1 + num2;
}

// 函數(shù)表達式則不行
alert(sum1(10,10));
var sum1 = function(num1,num2){
    return num1 + num2;
}

這是因為解析器在向執(zhí)行環(huán)境加載數(shù)據(jù)時候，對于函數(shù)聲明和函數(shù)表達式，解析器會率先讀取函數(shù)聲明，使其在任何代碼之前可用(可以訪問)  

*作為值的函數(shù)，函數(shù)名做為變量進行傳參*


function callSomeFunction(someFunction,someArgument){
    return someFunction(someArgument);
}

function add10(num1){
    return num1 + 10;
}

var result = callSomeFunction(add10,10);
alert(result);


*函數(shù)的內部屬性*  
arguments對象上一篇筆記提及，類數(shù)組對象包含傳入函數(shù)的所有參數(shù)  
arguments對象擁有一個名為 `callee`的屬性，該屬性是一個指針，指向arguments對象的函數(shù)  
它的作用：


function factorial(num){
    if(num <= 1){
        return 1;
    }else{
                   // return num * factorial(num - 1);
        return num * arguments.callee(num - 1);
    }
}

var trueFactorial = factorial;
factorial = function(){
    return 0;
}
alert(trueFactorial(5)); // 120
alert(factorial(5)); // 0

`callee`作為指針的用法，解除了函數(shù)體內代碼和函數(shù)名的耦合  

**`this`**(很重要，要理解掌握)  
this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對象或者說是this值(全局作用域調用函數(shù)時，this指向的引用就是window)  


window.color = "red";

var o = {
    color:"blue"
};
function sayColor(){
    alert(this.color);
}

sayColor();

o.sayColor = sayColor; // 函數(shù)名是指向函數(shù)的指針
o.sayColor();

可以通過調試代碼，查看當前所在的this指向的環(huán)境對象  
**疑問:如果window.color 直接寫color/var color，不是應該也是指向全局的么，為什么會報undefined**

*兩個非繼承的方法apply() call()*  


// apply() call() bind()
function sum(num1,num2){
    return num1 + num2;
}

function applySum(num1,num2){
    return sum.apply(this,arguments); // 傳入arguments
    // return sum.call(this,[num1,num2]; //或者傳入數(shù)組
}
alert(callSum(10,10));
function callSum(num1,num2){
    return sum.call(this,num1,num2);
}
alert(callSum(10,10));

?*apply()和call() 的作用在于 擴充函數(shù)作用域（不明覺厲）*  


window.color = "red";
var o = {
    color:"blue"
};
function sayColor(){
    alert(this.color);
}

var objectSayColor = sayColor.bind(o); // bind方法 傳入對象o
objectSayColor();

sayColor();
sayColor.call(this);
sayColor.call(window);
sayColor.call(o);

小結

  
執(zhí)行環(huán)境的概念
  什么是作用域，作用域鏈的作用
  函數(shù)是個對象，有相應的屬性和方法
  前面的哪個疑問 是什么原因？

GPU云服務器云服務器 javascript學習筆記學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91491.html

javascript高程3 學習筆記(二)

摘要：的理解函數(shù)與其他語言函數(shù)最大的不同在于，其不介意傳入多少參數(shù)以及參數(shù)的類型比如函數(shù)的形參有兩個，但是調用函數(shù)傳入的參數(shù)可以寫一個，三個或不寫參數(shù)對應等，解析器都可以正常解析，這是因為中參數(shù)在內部是以一個數(shù)組形式來表示，故而不需要關系傳入?yún)?shù) ECMAScript function的理解 ECMAScript 函數(shù)與其他語言函數(shù)最大的不同在于，其不介意傳入多少參數(shù)以及參數(shù)的類型...

JerryWangSAP 2019-08-21 10:29 評論0 收藏0
javascript高程3 學習筆記(一)

摘要：元素，當瀏覽器不支持腳本數(shù)據(jù)結構有如下中基本數(shù)據(jù)結構操作符，用來檢測給定變量的數(shù)據(jù)類型結果都是，聲明沒初始化，使用生命變量但未對其進行初始化的，默認沒有進行聲明，傳遞給函數(shù)會導致一個錯誤，對于未聲明變量這么操作沒什么意義比如，也是返回。 javascript簡史微軟IE和網(wǎng)景在瀏覽器上的競爭 ECMAScript，由ECMA-262定義，提供核心語言功能 `ECMA 歐洲計算機制...

you_De 2019-08-21 10:29 評論0 收藏0
讀“js高程”筆記一

showImg(http://img3.douban.com/lpic/s8958650.jpg); 0x00 javascript組成 ECMAScript(-265)核心語言部分 DOM文檔對象模型（DOM1、2、3） BOM瀏覽器對象模型(提供與瀏覽器交互的接口和方法) 0x01 async 異步加載執(zhí)行順序不定 charset defer 延遲加載，立即下載腳本但不執(zhí)行 src ...

CollinPeng 2019-08-22 11:00 評論0 收藏0
javascript高程第三章部分筆記

摘要：標識符按以下規(guī)則組合第一個字符必須是一個字母，下劃線或一個美元符號。包含值的變量和尚未定義的變量是不一樣的，例子報錯然而，對未初始化的變量執(zhí)行操作符會返回值，對未聲明的變量執(zhí)行操作符統(tǒng)一也會返回值。 1. 語法 1.1 區(qū)分大小寫變量、函數(shù)名和操作費都區(qū)分大小寫。 1.2 標識符標識符指變量、函數(shù)、屬性的名字，或者函數(shù)的參數(shù)。標識符按以下規(guī)則組合：第一個字符必須是一個字母，下劃線...

lentoo 2019-08-26 11:33 評論0 收藏0
javascript高級程序設計（第三版）學習摘錄上

摘要：在這種情況下，函數(shù)在停止執(zhí)行后將返回值。這種用法一般用在需要提前停止函數(shù)執(zhí)行而又不需要返回值的情況下嚴格模式對函數(shù)有一些限制不能把函數(shù)命名為或不能把參數(shù)命名為或不能出現(xiàn)兩個命名參數(shù)同名的情況。把近期看高程這本書做的筆記摘錄整理出來了，總歸對原生javascript理論有了一個比較全面的的認識，這次把書中的一些知識要點摘錄出來了，便于以后查閱的時候有方向，也更有效率??！第一章、jav...

leap_frog 2019-08-26 11:52 評論0 收藏0