隨手記

時間 2019-11-18
標籤隨手简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript深刻簡出</title>
</head>
<body>

</body>
<script>    

// 第一章 1.1函數表達式 四種方法

// function variable 函數表達式
var add = function(a,b){
    // dosth    
};

// IEF(Immediately Executed Function)馬上執行函數，匿名函數直接調用也叫做當即執行函數表達式
(function(){
    // dosth
})();


// first-class function 函數也是對象，能夠將它做爲函數返回值來調用
return function(){
    // dosth
};

// NTF(Named Function Expression)命名函數表達式  ****-
var add = function foo (a,b){
    // dosth
};

  ---------變量和函數聲明在開始前會前置------------------


// NTF(Named Function Expression)命名函數表達式  ****-
// 著名的BUG
var func = function nef(){};
alert(func===nfe);
// 遞歸調用
var func = fuction nfe(){/* dosth */ nfe()};
//以上在ie6-8現實能夠調用，



//   第一章 1.2  大寫的F  Function 構造器 使用程度 **---
    var func = new Function('a'+'b','console.log(a + b)');
    func(1,2);//3

    var func = Function('a'+'b'+'console.log(a + b)');
    func(1,2);//3
// Function 構造器不實用的緣由
// CASE 1
Function('var localVal = "local";console.log(localVal);')();
console.log(typeof localVal);
// result:local,undefined

//CASE 2 
var globalVal = 'goabl';
(function(){
    var localVal = 'local';
    Function('console.log(typeof localVal + typeof gobalVal;')();
})();

-----------------------------------------------------------------
                        |  函數聲明   | 函數表達式    |   函數構造器
前置                    |        是      |       是          |        否
容許匿名                   |        否      |        對          |        對
加上括弧馬上調用         |        否      |        對          |        對
在定義該函數的做用
域經過函數名訪問        |        對      |     否          |        否
沒有函數名                |        否      |     否          |        對
    


/ 第二章 this關鍵字

// 全局的this(瀏覽器)
 // eg.
 console.log(this.document === document);//true

 console.log(this === window);//true

 this.a = 38;
 console.log(window.a);//38

/通常函數的this(瀏覽器)

//eg.

function f1() {
    return this;
}

f1() === window;//true,global object

/可是在嚴格模式下回報錯

//function f2(){
    'use strict'
    return this;
}

f2() === undefined;//true

/做爲對象方法的函數this
// eg.
var o = {
    prop:37,
    f:function(){
        return this.prop;
    }

};

console.log(o.f());//logs 37

/對象原型鏈上的this
//eg.
var o = {f:function(){ return this.a + this.b;}};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f());

/get/set方法與this

function modulus(){
    return Math.sqrt(this.re*this.re + this.im*this.im);
}
var o = {
    re:1,
    im:-1,
    get phase(){
        return Math.atan2(this.im,this.re);
    }
};

Object.defineProperty(o,'modulus',{
    get:modulus,enumerable:true,configurable:true
});

console.log(o.phase,o.modulus);//logs -0.78 1.4142

/構造器中的this
//eg.
function MyClass(){
    this.a = 37;
}
var o =new MyClass();
console.log(o.a);//37
function C2(){
    this.a = 37;
    return {a:38};
}

o = new C2();
console.log(o.a);//38

/call/apply方法與this
//eg.
 function add(c,d){
     return this.a + this.b + C + d；
 }

 var o = {a:1,b:3};

 add.call(o,5,7);//1+3+5+7 = 16;

 add.apply(o,[10,20]);//1+3+10+20 = 34;

 fucntion bar(){
     console.log(Object.prototype.toString.call(this));
 }
bar.call(7);//"[object Number]"

/bind 方法與this
//eg.
function f(){
    return this.a;
}

var g = f.bind({a:"test"});
    console.log(g());//test

var o = {a:37,f:f,g:g};
console.log(o.f(),o.g());//37,test


/對象的概述
//對象中包含一系列的屬性，這些屬性是無序的，每個屬性多有一個字符串的key和對應的value
 var obj = {a:2,b;1};
 obj.a;//2
 obj.b;//1

 // 對象的結構
 // writable可寫
 // enumerable
 // configurable
 // value
 // get/set







</script>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。