摘要：將單個(gè)事件綁定在父對(duì)象上，利用冒泡機(jī)制監(jiān)聽(tīng)來(lái)自子元素的事件。事件目標(biāo)當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。函數(shù)對(duì)象當(dāng)使用去調(diào)用構(gòu)造函數(shù)時(shí)，相當(dāng)于執(zhí)行了原型對(duì)象上都有個(gè)預(yù)定義的屬性，用來(lái)引用它的函數(shù)對(duì)象。

將單個(gè)事件綁定在父對(duì)象上，利用冒泡機(jī)制,監(jiān)聽(tīng)來(lái)自子元素的事件。

優(yōu)點(diǎn)：解決子元素增加刪除時(shí)候的事件處理，防止內(nèi)存泄漏

事件捕獲：當(dāng)某個(gè)元素觸發(fā)某個(gè)事件（如onclick），頂層對(duì)象document就會(huì)發(fā)出一個(gè)事件流，隨著DOM樹(shù)的節(jié)點(diǎn)向目標(biāo)元素節(jié)點(diǎn)流去，直到到達(dá)事件真正發(fā)生的目標(biāo)元素。在這個(gè)過(guò)程中，事件相應(yīng)的監(jiān)聽(tīng)函數(shù)是不會(huì)被觸發(fā)的。

事件目標(biāo)：當(dāng)?shù)竭_(dá)目標(biāo)元素之后，執(zhí)行目標(biāo)元素該事件相應(yīng)的處理函數(shù)。如果沒(méi)有綁定監(jiān)聽(tīng)函數(shù)，那就不執(zhí)行。

事件起泡：從目標(biāo)元素開(kāi)始，往頂層元素傳播。途中如果有節(jié)點(diǎn)綁定了相應(yīng)的事件處理函數(shù)，這些函數(shù)都會(huì)被一次觸發(fā)。如果想阻止事件起泡，可以使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來(lái)組織事件的冒泡傳播。

stackoverflow

在全局環(huán)境時(shí)

// this 表示window

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

放在object方法里面時(shí)

this綁定到包含他的對(duì)象

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

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

var obj1 = {
    name: "obj1",
}

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

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

當(dāng)調(diào)用一個(gè)無(wú)上下問(wèn)的函數(shù)

當(dāng)函數(shù)調(diào)用沒(méi)有包含上下文,this將綁定到global對(duì)象

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 

當(dāng)使用在構(gòu)造函數(shù)時(shí)

即使用new關(guān)鍵字時(shí)，this指向剛創(chuàng)建的對(duì)象

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

當(dāng)內(nèi)部對(duì)象定義在原型鏈時(shí)

當(dāng)一個(gè)方法定義在對(duì)象原型鏈，this指向調(diào)用該方法的對(duì)象

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() 函數(shù)內(nèi)部

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

this在事件處理上

如果函數(shù)在eventHandler和onclick直接被調(diào)用 this指向元素(currentTarget)
否則執(zhí)行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() 

當(dāng)定義一個(gè)函數(shù)對(duì)象的時(shí)候，會(huì)包含一個(gè)預(yù)定義的屬性，叫prototype，這就屬性稱(chēng)之為原型對(duì)象。

function F(){};
console.log(F.prototype)
//F.prototype包含
//contructor構(gòu)造函數(shù)

JavaScript在創(chuàng)建對(duì)象的時(shí)候，都會(huì)有一個(gè)[[proto]]的內(nèi)置屬性，用于指向創(chuàng)建它的函數(shù)對(duì)象的prototype。原型對(duì)象也有[[proto]]屬性。因此在不斷的指向中，形成了原型鏈。

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

當(dāng)使用new去調(diào)用構(gòu)造函數(shù)時(shí)，相當(dāng)于執(zhí)行了

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

原型對(duì)象prototype上都有個(gè)預(yù)定義的constructor屬性，用來(lái)引用它的函數(shù)對(duì)象。這是一種循環(huán)引用。

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

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

__proto__真正的原型鏈
prototype只存在與構(gòu)造函數(shù)中

沒(méi)有加括號(hào)

null===null
undefined === undefined

函數(shù)閉包（function closures），是引用了自由變量的函數(shù)。這個(gè)被引用的自由變量將和這個(gè)函數(shù)一同存在，即使已經(jīng)離開(kāi)了創(chuàng)造它的環(huán)境也不例外

回調(diào)

apply 第二個(gè)參數(shù)是數(shù)組
call 第二個(gè)以后的可變參數(shù)

寫(xiě)script

XMLHttpRequest

通過(guò)在網(wǎng)頁(yè)中加入script標(biāo)簽，是瀏覽器通過(guò)get方式加載一段js代碼

通過(guò) var 聲明的變量在代碼執(zhí)行之前被js引擎提升到了當(dāng)前作用域的頂部

一個(gè)事件被觸發(fā)，會(huì)發(fā)生先捕獲后冒泡的行為。
冒泡機(jī)制指一個(gè)事件從發(fā)生元素開(kāi)始先父元素傳遞，直到達(dá)到根元素

js dom 對(duì)象擁有的property，property有很多類(lèi)型
attribute是指html擁有的特性，類(lèi)型是字符串

DomContentLoaded事件發(fā)生在domcument對(duì)象被初始化完成，css，圖片和frame還沒(méi)被加載的時(shí)候

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

==會(huì)發(fā)生類(lèi)型轉(zhuǎn)換
===不會(huì)發(fā)生類(lèi)型轉(zhuǎn)換

同源策略限制從一個(gè)源加載的文檔或腳本如何與來(lái)自另一個(gè)源的資源進(jìn)行交互

http://store.company.com/dir2... 成功
http://store.company.com/dir/... 成功
https://store.company.com/sec... 失敗 不同協(xié)議 ( 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運(yùn)行時(shí)以嚴(yán)格模式執(zhí)行javascript語(yǔ)句
使js以更安全的方式執(zhí)行，對(duì)某些行為直接報(bào)錯(cuò)

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)
    }
}

單頁(yè)應(yīng)用是指所有的資源交互都放在一個(gè)頁(yè)面，而不是交互的時(shí)候跳轉(zhuǎn)到另一個(gè)頁(yè)面。
使用ssr服務(wù)端渲染。

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

將回調(diào)轉(zhuǎn)換成鏈?zhǔn)秸{(diào)用

console.log
debuger

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

mutable
imuutable表示對(duì)象創(chuàng)建后就不再變化

可以比較對(duì)象，線程安全
缺點(diǎn)就是費(fèi)內(nèi)存

同步是指順序執(zhí)行，會(huì)有阻塞
異步是指函數(shù)立即執(zhí)行并返回

主線程運(yùn)行的時(shí)候，產(chǎn)生堆（heap）和棧（stack），棧中的代碼調(diào)用各種外部API，它們?cè)?任務(wù)隊(duì)列"中加入各種事件（click，load，done）。只要棧中的代碼執(zhí)行完畢，主線程就會(huì)去讀取"任務(wù)隊(duì)列"，依次執(zhí)行那些事件所對(duì)應(yīng)的回調(diào)函數(shù)。

javascript中的所有任務(wù)分為兩類(lèi)，
一類(lèi)是同步任務(wù)，另一種是一部任務(wù)。
所有的同步任務(wù)都在主線程上執(zhí)行，
當(dāng)同步任務(wù)執(zhí)行完在執(zhí)行異步任務(wù)。

call stack 指主線線程執(zhí)行任務(wù)的地方，當(dāng)調(diào)用棧為空的時(shí)候，
會(huì)去輪詢(xún)task queue，然后將隊(duì)列里的任務(wù)加入棧中執(zhí)行
tast queue 按照包含一系列任務(wù)的隊(duì)列

第一個(gè)表示生成一個(gè)命名的函數(shù)
第二個(gè)表示生成一個(gè)匿名函數(shù) ，并賦值給foo

let var const都表示申明一個(gè)變量

var的作用于是函數(shù)體的全部，會(huì)發(fā)生作用于提升
let，const是塊級(jí)作用域
let表示可以被多次賦值
const表示只能被一次賦值

js的加法只有兩種

字符串和字符串的相加

數(shù)字和數(shù)字的相加

加法運(yùn)算會(huì)觸發(fā)三種轉(zhuǎn)換

原始值

數(shù)字

字符串

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

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

> {} + {}
"NaN" 
// 火狐下為NaN 因?yàn)榈谝粋€(gè)對(duì)象當(dāng)作空代碼塊，實(shí)際執(zhí)行為 +{}