摘要：將單個事件綁定在父對象上，利用冒泡機制監聽來自子元素的事件。事件目標當到達目標元素之后，執行目標元素該事件相應的處理函數。函數對象當使用去調用構造函數時，相當于執行了原型對象上都有個預定義的屬性，用來引用它的函數對象。

將單個事件綁定在父對象上，利用冒泡機制,監聽來自子元素的事件。

優點：解決子元素增加刪除時候的事件處理，防止內存泄漏

事件捕獲：當某個元素觸發某個事件（如onclick），頂層對象document就會發出一個事件流，隨著DOM樹的節點向目標元素節點流去，直到到達事件真正發生的目標元素。在這個過程中，事件相應的監聽函數是不會被觸發的。

事件目標：當到達目標元素之后，執行目標元素該事件相應的處理函數。如果沒有綁定監聽函數，那就不執行。

事件起泡：從目標元素開始，往頂層元素傳播。途中如果有節點綁定了相應的事件處理函數，這些函數都會被一次觸發。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

stackoverflow

在全局環境時

// this 表示window

function f(){
    return this //也是window
}

放在object方法里面時

this綁定到包含他的對象

var obj = {
    name: "obj",
    f: function () {
        return this + ":" + this.name;
    }
};
document.write(obj.f());

var obj = {
    name: "obj1",
    nestedobj: {
        name:"nestedobj",
        f: function () {
            return this + ":" + this.name;
        }
    }            
}

document.write(obj.nestedobj.f()); //[object Object]:nestedobj

即使你隱式的添加方法到對象，this仍然指向
立即父對象

var obj1 = {
    name: "obj1",
}

function returnName() {
    return this + ":" + this.name;
}

obj1.f = returnName; //add method to object
document.write(obj1.f()); //[object Object]:obj1

當調用一個無上下問的函數

當函數調用沒有包含上下文,this將綁定到global對象

var context = "global";

var obj = {  
    context: "object",
    method: function () {                  
        function f() {
            var context = "function";
            return this + ":" +this.context; 
        };
        return f(); //invoked without context
    }
};

document.write(obj.method()); //[object Window]:global 

當使用在構造函數時

即使用new關鍵字時，this指向剛創建的對象

var myname = "global context";
function SimpleFun()
{
    this.myname = "simple function";
}

var obj1 = new SimpleFun(); //adds myname to obj1
//1. `new` causes `this` inside the SimpleFun() to point to the
//   object being constructed thus adding any member
//   created inside SimipleFun() using this.membername to the
//   object being constructed
//2. And by default `new` makes function to return newly 
//   constructed object if no explicit return value is specified

document.write(obj1.myname); //simple function

當內部對象定義在原型鏈時

當一個方法定義在對象原型鏈，this指向調用該方法的對象

var ProtoObj = {
    fun: function () {
        return this.a;
    }
};
//Object.create() creates object with ProtoObj as its
//prototype and assigns it to obj3, thus making fun() 
//to be the method on its prototype chain

var obj3 = Object.create(ProtoObj);
obj3.a = 999;
document.write(obj3.fun()); //999

//Notice that fun() is defined on obj3"s prototype but 
//`this.a` inside fun() retrieves obj3.a   

在 call(), apply() and bind() 函數內部

fun.apply(obj1 [, argsArray])
fun.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]]) 
設置this函數并執行
fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])
設置this

this在事件處理上

如果函數在eventHandler和onclick直接被調用 this指向元素(currentTarget)
否則執行window

Using `this` "directly" inside event handler or event property
click() "assigned" using addEventListner() 

click() "assigned" using click() 

used `this` directly in click event property

Using `this` "indirectly" inside event handler or event property
`this` used indirectly, inside function 
 defined & called inside event property


`this` used indirectly, inside function 
 called inside event property 


IE only: click() "attached" using attachEvent() 

當定義一個函數對象的時候，會包含一個預定義的屬性，叫prototype，這就屬性稱之為原型對象。

function F(){};
console.log(F.prototype)
//F.prototype包含
//contructor構造函數

JavaScript在創建對象的時候，都會有一個[[proto]]的內置屬性，用于指向創建它的函數對象的prototype。原型對象也有[[proto]]屬性。因此在不斷的指向中，形成了原型鏈。

//函數對象
function F(){};
F.prototype = {
    hello : function(){}
};
var f = new F();
console.log(f.__proto__)

當使用new去調用構造函數時，相當于執行了

var o = {};
o.__proto__ = F.prototype;
F.call(o);

原型對象prototype上都有個預定義的constructor屬性，用來引用它的函數對象。這是一種循環引用。

function F(){};
F.prototype.constructor === F;

( new Foo ).__proto__ === Foo.prototype
( new Foo ).prototype === undefined

__proto__真正的原型鏈
prototype只存在與構造函數中

沒有加括號

null===null
undefined === undefined

函數閉包（function closures），是引用了自由變量的函數。這個被引用的自由變量將和這個函數一同存在，即使已經離開了創造它的環境也不例外

回調

apply 第二個參數是數組
call 第二個以后的可變參數

寫script

XMLHttpRequest

通過在網頁中加入script標簽，是瀏覽器通過get方式加載一段js代碼

通過 var 聲明的變量在代碼執行之前被js引擎提升到了當前作用域的頂部

一個事件被觸發，會發生先捕獲后冒泡的行為。
冒泡機制指一個事件從發生元素開始先父元素傳遞，直到達到根元素

js dom 對象擁有的property，property有很多類型
attribute是指html擁有的特性，類型是字符串

DomContentLoaded事件發生在domcument對象被初始化完成，css，圖片和frame還沒被加載的時候

load事件表示資源被全部加載

==會發生類型轉換
===不會發生類型轉換

同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互

http://store.company.com/dir2... 成功
http://store.company.com/dir/... 成功
https://store.company.com/sec... 失敗 不同協議 ( https和http )
http://store.company.com:81/dir/etc.html 失敗 不同端口 ( 81和80)
http://news.company.com/dir/o... 失敗 不同域名 ( news和store

[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]
Arrry.prototype.duplicator = function(){
    return this.concat(this)
}

"use strict" 告訴js運行時以嚴格模式執行javascript語句
使js以更安全的方式執行，對某些行為直接報錯

for(let i=1;i<=100;i++){
    let word = ""
    if(i % 3 ==0){
        word += "fizz"
    }
    if(i % 5 ==0){
        word += "buzz"
    }
    if(word){
        console.log(word)
    }
}

單頁應用是指所有的資源交互都放在一個頁面，而不是交互的時候跳轉到另一個頁面。
使用ssr服務端渲染。

new Promise(resolve,reject)
Promise.resolve
Promise.reject

將回調轉換成鏈式調用

console.log
debuger

array array.foreach
object for var i in xx i是字符串

mutable
imuutable表示對象創建后就不再變化

可以比較對象，線程安全
缺點就是費內存

同步是指順序執行，會有阻塞
異步是指函數立即執行并返回

主線程運行的時候，產生堆（heap）和棧（stack），棧中的代碼調用各種外部API，它們在"任務隊列"中加入各種事件（click，load，done）。只要棧中的代碼執行完畢，主線程就會去讀取"任務隊列"，依次執行那些事件所對應的回調函數。

javascript中的所有任務分為兩類，
一類是同步任務，另一種是一部任務。
所有的同步任務都在主線程上執行，
當同步任務執行完在執行異步任務。

call stack 指主線線程執行任務的地方，當調用棧為空的時候，
會去輪詢task queue，然后將隊列里的任務加入棧中執行
tast queue 按照包含一系列任務的隊列

第一個表示生成一個命名的函數
第二個表示生成一個匿名函數 ，并賦值給foo

let var const都表示申明一個變量

var的作用于是函數體的全部，會發生作用于提升
let，const是塊級作用域
let表示可以被多次賦值
const表示只能被一次賦值

js的加法只有兩種

字符串和字符串的相加

數字和數字的相加

加法運算會觸發三種轉換

原始值

數字

字符串

> [] + []
""
//[].toString()為空字符串,空字符串相加

> [] + {}
"[object Object]"

> {} + {}
"NaN" 
// 火狐下為NaN 因為第一個對象當作空代碼塊，實際執行為 +{}