摘要：借用構(gòu)造函數(shù)類(lèi)式繼承借用構(gòu)造函數(shù)雖然解決了剛才兩種問(wèn)題，但沒(méi)有原型，則復(fù)用無(wú)從談起。

【前端指南】前端面試庫(kù)已經(jīng)開(kāi)源，正在完善之中

[x] css問(wèn)題

[x] html問(wèn)題

[x] javascript問(wèn)題

github地址 https://github.com/nanhupatar...

JavaScript 由以下三部分組成：

ECMAScript（核心）：JavaScript 語(yǔ)言基礎(chǔ)

DOM（文檔對(duì)象模型）：規(guī)定了訪(fǎng)問(wèn) HTML 和 XML 的接口

BOM（瀏覽器對(duì)象模型）：提供了瀏覽器窗口之間進(jìn)行交互的對(duì)象和方法

基本數(shù)據(jù)類(lèi)型：undefined、null、boolean、number、string、symbol

引用數(shù)據(jù)類(lèi)型：object、array、function

根據(jù) navigator.userAgent // UA.toLowerCase().indexOf("chrome")

根據(jù) window 對(duì)象的成員 // "ActiveXObject" in window

數(shù)據(jù)封裝類(lèi)對(duì)象：Object、Array、Boolean、Number、String

其他對(duì)象：Function、Arguments、Math、Date、RegExp、Error

ES6 新增對(duì)象：Symbol、Map、Set、Promises、Proxy、Reflect

代碼縮進(jìn)，建議使用“四個(gè)空格”縮進(jìn)

代碼段使用花括號(hào){}包裹

語(yǔ)句結(jié)束使用分號(hào);

變量和函數(shù)在使用前進(jìn)行聲明

以大寫(xiě)字母開(kāi)頭命名構(gòu)造函數(shù)，全大寫(xiě)命名常量

規(guī)范定義 JSON 對(duì)象，補(bǔ)全雙引號(hào)

用{}和[]聲明對(duì)象和數(shù)組

遵循嚴(yán)格模式："use strict";

將 js 腳本放在頁(yè)面底部，加快渲染頁(yè)面

將 js 腳本將腳本成組打包，減少請(qǐng)求

使用非阻塞方式下載 js 腳本

盡量使用局部變量來(lái)保存全局變量

盡量減少使用閉包

使用 window 對(duì)象屬性方法時(shí)，省略 window

盡量減少對(duì)象成員嵌套

緩存 DOM 節(jié)點(diǎn)的訪(fǎng)問(wèn)

通過(guò)避免使用 eval() 和 Function() 構(gòu)造器

給 setTimeout() 和 setInterval() 傳遞函數(shù)而不是字符串作為參數(shù)

盡量使用直接量創(chuàng)建對(duì)象和數(shù)組

最小化重繪(repaint)和回流(reflow)

e.getAttribute()，是標(biāo)準(zhǔn) DOM 操作文檔元素屬性的方法，具有通用性可在任意文檔上使用，返回元素在源文件中設(shè)置的屬性

e.propName 通常是在 HTML 文檔中訪(fǎng)問(wèn)特定元素的特性，瀏覽器解析元素后生成對(duì)應(yīng)對(duì)象（如 a 標(biāo)簽生成 HTMLAnchorElement），這些對(duì)象的特性會(huì)根據(jù)特定規(guī)則結(jié)合屬性設(shè)置得到，對(duì)于沒(méi)有對(duì)應(yīng)特性的屬性，只能使用 getAttribute 進(jìn)行訪(fǎng)問(wèn)

e.getAttribute()返回值是源文件中設(shè)置的值，類(lèi)型是字符串或者 null（有的實(shí)現(xiàn)返回""）

e.propName 返回值可能是字符串、布爾值、對(duì)象、undefined 等

大部分 attribute 與 property 是一一對(duì)應(yīng)關(guān)系，修改其中一個(gè)會(huì)影響另一個(gè)，如 id，title 等屬性

一些布爾屬性的檢測(cè)設(shè)置需要 hasAttribute 和 removeAttribute 來(lái)完成，或者設(shè)置對(duì)應(yīng) property

像link中 href 屬性，轉(zhuǎn)換成 property 的時(shí)候需要通過(guò)轉(zhuǎn)換得到完整 URL

一些 attribute 和 property 不是一一對(duì)應(yīng)如：form 控件中對(duì)應(yīng)的是 defaultValue，修改或設(shè)置 value property 修改的是控件當(dāng)前值，setAttribute 修改 value 屬性不會(huì)改變 value property

offsetWidth/offsetHeight 返回值包含 content + padding + border，效果與 e.getBoundingClientRect()相同

clientWidth/clientHeight 返回值只包含 content + padding，如果有滾動(dòng)條，也不包含滾動(dòng)條

scrollWidth/scrollHeight 返回值包含 content + padding + 溢出內(nèi)容的尺寸

瀏覽器的渲染過(guò)程：

解析 HTML 構(gòu)建 DOM(DOM 樹(shù))，并行請(qǐng)求 css/image/js

CSS 文件下載完成，開(kāi)始構(gòu)建 CSSOM(CSS 樹(shù))

CSSOM 構(gòu)建結(jié)束后，和 DOM 一起生成 Render Tree(渲染樹(shù))

布局(Layout)：計(jì)算出每個(gè)節(jié)點(diǎn)在屏幕中的位置

顯示(Painting)：通過(guò)顯卡把頁(yè)面畫(huà)到屏幕上

DOM 樹(shù) 和 渲染樹(shù) 的區(qū)別：

DOM 樹(shù)與 HTML 標(biāo)簽一一對(duì)應(yīng)，包括 head 和隱藏元素

渲染樹(shù)不包括 head 和隱藏元素，大段文本的每一個(gè)行都是獨(dú)立節(jié)點(diǎn)，每一個(gè)節(jié)點(diǎn)都有對(duì)應(yīng)的 css 屬性

重繪：當(dāng)渲染樹(shù)中的元素外觀(guān)（如：顏色）發(fā)生改變，不影響布局時(shí)，產(chǎn)生重繪

回流：當(dāng)渲染樹(shù)中的元素的布局（如：尺寸、位置、隱藏/狀態(tài)狀態(tài)）發(fā)生改變時(shí)，產(chǎn)生重繪回流

注意：JS 獲取 Layout 屬性值（如：offsetLeft、scrollTop、getComputedStyle 等）也會(huì)引起回流。因?yàn)闉g覽器需要通過(guò)回流計(jì)算最新值

回流必將引起重繪，而重繪不一定會(huì)引起回流

需要要對(duì)元素進(jìn)行復(fù)雜的操作時(shí)，可以先隱藏(display:"none")，操作完成后再顯示

需要?jiǎng)?chuàng)建多個(gè) DOM 節(jié)點(diǎn)時(shí)，使用 DocumentFragment 創(chuàng)建完后一次性的加入 document

緩存 Layout 屬性值，如：var left = elem.offsetLeft; 這樣，多次使用 left 只產(chǎn)生一次回流

盡量避免用 table 布局（table 元素一旦觸發(fā)回流就會(huì)導(dǎo)致 table 里所有的其它元素回流）

避免使用 css 表達(dá)式(expression)，因?yàn)槊看握{(diào)用都會(huì)重新計(jì)算值（包括加載頁(yè)面）

盡量使用 css 屬性簡(jiǎn)寫(xiě)，如：用 border 代替 border-width, border-style, border-color
批量修改元素樣式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

在解析 HTML 生成 DOM 過(guò)程中，js 文件的下載是并行的，不需要 DOM 處理到 script 節(jié)點(diǎn)。因此，script 的位置不影響首屏顯示的開(kāi)始時(shí)間。

瀏覽器解析 HTML 是自上而下的線(xiàn)性過(guò)程，script 作為 HTML 的一部分同樣遵循這個(gè)原則

因此，script 會(huì)延遲 DomContentLoad，只顯示其上部分首屏內(nèi)容，從而影響首屏顯示的完成時(shí)間

JavaScript 作用域：

在 Java、C 等語(yǔ)言中，作用域?yàn)?for 語(yǔ)句、if 語(yǔ)句或{}內(nèi)的一塊區(qū)域，稱(chēng)為作用域；

而在 JavaScript 中，作用域?yàn)?function(){}內(nèi)的區(qū)域，稱(chēng)為函數(shù)作用域。

JavaScript 變量聲明提升：

在 JavaScript 中，函數(shù)聲明與變量聲明經(jīng)常被 JavaScript 引擎隱式地提升到當(dāng)前作用域的頂部。

聲明語(yǔ)句中的賦值部分并不會(huì)被提升，只有名稱(chēng)被提升

函數(shù)聲明的優(yōu)先級(jí)高于變量，如果變量名跟函數(shù)名相同且未賦值，則函數(shù)聲明會(huì)覆蓋變量聲明

如果函數(shù)有多個(gè)同名參數(shù)，那么最后一個(gè)參數(shù)（即使沒(méi)有定義）會(huì)覆蓋前面的同名參數(shù)

原型：

JavaScript 的所有對(duì)象中都包含了一個(gè) [proto] 內(nèi)部屬性，這個(gè)屬性所對(duì)應(yīng)的就是該對(duì)象的原型

JavaScript 的函數(shù)對(duì)象，除了原型 [proto] 之外，還預(yù)置了 prototype 屬性

當(dāng)函數(shù)對(duì)象作為構(gòu)造函數(shù)創(chuàng)建實(shí)例時(shí)，該 prototype 屬性值將被作為實(shí)例對(duì)象的原型 [proto]。

原型鏈：

當(dāng)一個(gè)對(duì)象調(diào)用的屬性/方法自身不存在時(shí)，就會(huì)去自己 [proto] 關(guān)聯(lián)的前輩 prototype 對(duì)象上去找

如果沒(méi)找到，就會(huì)去該 prototype 原型 [proto] 關(guān)聯(lián)的前輩 prototype 去找。依次類(lèi)推，直到找到屬性/方法或 undefined 為止。從而形成了所謂的“原型鏈”

原型特點(diǎn)：

JavaScript 對(duì)象是通過(guò)引用來(lái)傳遞的，當(dāng)修改原型時(shí)，與之相關(guān)的對(duì)象也會(huì)繼承這一改變

原始數(shù)據(jù)類(lèi)型（Undefined，Null，Boolean，Number、String）-- 棧

引用數(shù)據(jù)類(lèi)型（對(duì)象、數(shù)組和函數(shù)）-- 堆

兩種類(lèi)型的區(qū)別是：存儲(chǔ)位置不同：

原始數(shù)據(jù)類(lèi)型是直接存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)；

引用數(shù)據(jù)類(lèi)型存儲(chǔ)在堆(heap)中的對(duì)象，占據(jù)空間大、大小不固定，如果存儲(chǔ)在棧中，將會(huì)影響程序運(yùn)行的性能；

引用數(shù)據(jù)類(lèi)型在棧中存儲(chǔ)了指針，該指針指向堆中該實(shí)體的起始地址。

當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址，取得地址后從堆中獲得實(shí)體。

構(gòu)造函數(shù)法（this + prototype） -- 用 new 關(guān)鍵字 生成實(shí)例對(duì)象

缺點(diǎn)：用到了 this 和 prototype，編寫(xiě)復(fù)雜，可讀性差

  function Mobile(name, price){
     this.name = name;
     this.price = price;
   }
   Mobile.prototype.sell = function(){
      alert(this.name + "，售價(jià) $" + this.price);
   }
   var iPhone7 = new Mobile("iPhone7", 1000);
   iPhone7.sell();

Object.create 法 -- 用 Object.create() 生成實(shí)例對(duì)象

缺點(diǎn)：不能實(shí)現(xiàn)私有屬性和私有方法，實(shí)例對(duì)象之間也不能共享數(shù)據(jù)

 var Person = {
     firstname: "Mark",
     lastname: "Yun",
     age: 25,
     introduce: function(){
         alert("I am " + Person.firstname + " " + Person.lastname);
     }
 };

 var person = Object.create(Person);
 person.introduce();

 // Object.create 要求 IE9+，低版本瀏覽器可以自行部署：
 if (!Object.create) {
　   Object.create = function (o) {
　　　 function F() {}
　　　 F.prototype = o;
　　　 return new F();
　　};
　}

極簡(jiǎn)主義法（消除 this 和 prototype） -- 調(diào)用 createNew() 得到實(shí)例對(duì)象

優(yōu)點(diǎn)：容易理解，結(jié)構(gòu)清晰優(yōu)雅，符合傳統(tǒng)的"面向?qū)ο缶幊?的構(gòu)造

 var Cat = {
   age: 3, // 共享數(shù)據(jù) -- 定義在類(lèi)對(duì)象內(nèi)，createNew() 外
   createNew: function () {
     var cat = {};
     // var cat = Animal.createNew(); // 繼承 Animal 類(lèi)
     cat.name = "小咪";
     var sound = "喵喵喵"; // 私有屬性--定義在 createNew() 內(nèi)，輸出對(duì)象外
     cat.makeSound = function () {
       alert(sound);  // 暴露私有屬性
     };
     cat.changeAge = function(num){
       Cat.age = num; // 修改共享數(shù)據(jù)
     };
     return cat; // 輸出對(duì)象
   }
 };

 var cat = Cat.createNew();
 cat.makeSound();

ES6 語(yǔ)法糖 class -- 用 new 關(guān)鍵字 生成實(shí)例對(duì)象

     class Point {
       constructor(x, y) {
         this.x = x;
         this.y = y;
       }
       toString() {
         return "(" + this.x + ", " + this.y + ")";
       }
     }

  var point = new Point(2, 3);

構(gòu)造函數(shù)綁定：使用 call 或 apply 方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上

function Cat(name,color){
 　Animal.apply(this, arguments);
 　this.name = name;
 　this.color = color;
}

實(shí)例繼承：將子對(duì)象的 prototype 指向父對(duì)象的一個(gè)實(shí)例

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

拷貝繼承：如果把父對(duì)象的所有屬性和方法，拷貝進(jìn)子對(duì)象

function extend(Child, Parent) {
　　　var p = Parent.prototype;
　　　var c = Child.prototype;
　　　for (var i in p) {
　　　   c[i] = p[i];
　　　}
　　　c.uber = p;
}

原型繼承：將子對(duì)象的 prototype 指向父對(duì)象的 prototype

function extend(Child, Parent) {
    var F = function(){};
    　F.prototype = Parent.prototype;
    　Child.prototype = new F();
    　Child.prototype.constructor = Child;
    　Child.uber = Parent.prototype;
}

ES6 語(yǔ)法糖 extends：class ColorPoint extends Point {}

class ColorPoint extends Point {
    constructor(x, y, color) {
        super(x, y); // 調(diào)用父類(lèi)的constructor(x, y)
        this.color = color;
    }
    toString() {
        return this.color + " " + super.toString(); // 調(diào)用父類(lèi)的toString()
    }
}

原型鏈繼承的缺點(diǎn)

一是字面量重寫(xiě)原型會(huì)中斷關(guān)系，使用引用類(lèi)型的原型，并且子類(lèi)型還無(wú)法給超類(lèi)型傳遞參數(shù)。

借用構(gòu)造函數(shù)（類(lèi)式繼承）

借用構(gòu)造函數(shù)雖然解決了剛才兩種問(wèn)題，但沒(méi)有原型，則復(fù)用無(wú)從談起。所以我們需要原型鏈+借用構(gòu)造函數(shù)的模式，這種模式稱(chēng)為組合繼承

組合式繼承

組合式繼承是比較常用的一種繼承方法，其背后的思路是使用原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，而通過(guò)借用構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。這樣，既通過(guò)在原型上定義方法實(shí)現(xiàn)了函數(shù)復(fù)用，又保證每個(gè)實(shí)例都有它自己的屬性。

javascript 創(chuàng)建對(duì)象簡(jiǎn)單的說(shuō),無(wú)非就是使用內(nèi)置對(duì)象或各種自定義對(duì)象，當(dāng)然還可以用 JSON；但寫(xiě)法有很多種，也能混合使用

對(duì)象字面量的方式

person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

用 function 來(lái)模擬無(wú)參的構(gòu)造函數(shù)

 function Person(){}
    var person=new Person();//定義一個(gè)function，如果使用new"實(shí)例化",該function可以看作是一個(gè)Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
    }
person.work();

用 function 來(lái)模擬參構(gòu)造函數(shù)來(lái)實(shí)現(xiàn)（用 this 關(guān)鍵字定義構(gòu)造的上下文屬性）

function Pet(name,age,hobby){
    this.name=name;//this作用域：當(dāng)前對(duì)象
    this.age=age;
    this.hobby=hobby;
    this.eat=function(){
        alert("我叫"+this.name+",我喜歡"+this.hobby+",是個(gè)程序員");
    }
}
var maidou =new Pet("麥兜",25,"coding");//實(shí)例化、創(chuàng)建對(duì)象
maidou.eat();//調(diào)用eat方法

用工廠(chǎng)方式來(lái)創(chuàng)建（內(nèi)置對(duì)象）

var wcDog =new Object();
     wcDog.name="旺財(cái)";
     wcDog.age=3;
wcDog.work=function(){
    alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();

用原型方式來(lái)創(chuàng)建

function Dog(){

    }
Dog.prototype.name="旺財(cái)";
Dog.prototype.eat=function(){
    alert(this.name+"是個(gè)吃貨");
}
var wangcai =new Dog();
wangcai.eat();

用混合方式來(lái)創(chuàng)建

function Car(name,price){
    this.name=name;
    this.price=price;
}
    Car.prototype.sell=function(){
    alert("我是"+this.name+"，我現(xiàn)在賣(mài)"+this.price+"萬(wàn)元");
    }
var camry =new Car("凱美瑞",27);
camry.sell();

全局函數(shù)無(wú)法查看局部函數(shù)的內(nèi)部細(xì)節(jié)，但局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)，直至全局細(xì)節(jié)

如果當(dāng)前作用域沒(méi)有找到屬性或方法，會(huì)向上層作用域查找，直至全局函數(shù)，這種形式就是作用域鏈

this 總是指向函數(shù)的直接調(diào)用者

如果有 new 關(guān)鍵字，this 指向 new 出來(lái)的實(shí)例對(duì)象

在事件中，this 指向觸發(fā)這個(gè)事件的對(duì)象

IE 下 attachEvent 中的 this 總是指向全局對(duì)象 Window

eval 的功能是把對(duì)應(yīng)的字符串解析成 JS 代碼并運(yùn)行

應(yīng)該避免使用 eval，不安全，非常耗性能（先解析成 js 語(yǔ)句，再執(zhí)行）

由 JSON 字符串轉(zhuǎn)換為 JSON 對(duì)象的時(shí)候可以用 eval("("+ str +")");

Window 對(duì)象表示當(dāng)前瀏覽器的窗口，是 JavaScript 的頂級(jí)對(duì)象。

我們創(chuàng)建的所有對(duì)象、函數(shù)、變量都是 Window 對(duì)象的成員。

Window 對(duì)象的方法和屬性是在全局范圍內(nèi)有效的。

Document 對(duì)象是 HTML 文檔的根節(jié)點(diǎn)與所有其他節(jié)點(diǎn)（元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，屬性節(jié)點(diǎn), 注釋節(jié)點(diǎn)）

Document 對(duì)象使我們可以通過(guò)腳本對(duì) HTML 頁(yè)面中的所有元素進(jìn)行訪(fǎng)問(wèn)

Document 對(duì)象是 Window 對(duì)象的一部分，可通過(guò) window.document 屬性對(duì)其進(jìn)行訪(fǎng)問(wèn)

DOM：文檔對(duì)象模型（Document Object Model），定義了訪(fǎng)問(wèn) HTML 和 XML 文檔的標(biāo)準(zhǔn)，與編程語(yǔ)言及平臺(tái)無(wú)關(guān)

DOM0：提供了查詢(xún)和操作 Web 文檔的內(nèi)容 API。未形成標(biāo)準(zhǔn)，實(shí)現(xiàn)混亂。如：document.forms["login"]

DOM1：W3C 提出標(biāo)準(zhǔn)化的 DOM，簡(jiǎn)化了對(duì)文檔中任意部分的訪(fǎng)問(wèn)和操作。如：JavaScript 中的 Document 對(duì)象

DOM2：原來(lái) DOM 基礎(chǔ)上擴(kuò)充了鼠標(biāo)事件等細(xì)分模塊，增加了對(duì) CSS 的支持。如：getComputedStyle(elem, pseudo)

DOM3：增加了 XPath 模塊和加載與保存（Load and Save）模塊。如：XPathEvaluator

DOM0 級(jí)事件處理方式：

btn.onclick = func;

btn.onclick = null;

DOM2 級(jí)事件處理方式：

btn.addEventListener("click", func, false);

btn.removeEventListener("click", func, false);

btn.attachEvent("onclick", func);

btn.detachEvent("onclick", func);

DOM3 級(jí)事件處理方式：

eventUtil.addListener(input, "textInput", func);

eventUtil 是自定義對(duì)象，textInput 是 DOM3 級(jí)事件

捕獲、目標(biāo)、冒泡

按照 W3C 標(biāo)準(zhǔn)的事件：首是進(jìn)入捕獲階段，直到達(dá)到目標(biāo)元素，再進(jìn)入冒泡階段

事件執(zhí)行次數(shù)（DOM2-addEventListener）：元素上綁定事件的個(gè)數(shù)

注意 1：前提是事件被確實(shí)觸發(fā)

注意 2：事件綁定幾次就算幾個(gè)事件，即使類(lèi)型和功能完全一樣也不會(huì)“覆蓋”

事件執(zhí)行順序：判斷的關(guān)鍵是否目標(biāo)元素

非目標(biāo)元素：根據(jù) W3C 的標(biāo)準(zhǔn)執(zhí)行：捕獲->目標(biāo)元素->冒泡（不依據(jù)事件綁定順序）

目標(biāo)元素：依據(jù)事件綁定順序：先綁定的事件先執(zhí)行（不依據(jù)捕獲冒泡標(biāo)準(zhǔn)）

最終順序：父元素捕獲->目標(biāo)元素事件 1->目標(biāo)元素事件 2->子元素捕獲->子元素冒泡->父元素冒泡

注意：子元素事件執(zhí)行前提 事件確實(shí)“落”到子元素布局區(qū)域上，而不是簡(jiǎn)單的具有嵌套關(guān)系

該 DOM 上的事件如果被觸發(fā)，會(huì)執(zhí)行兩次（執(zhí)行次數(shù)等于綁定次數(shù)）

如果該 DOM 是目標(biāo)元素，則按事件綁定順序執(zhí)行，不區(qū)分冒泡/捕獲

如果該 DOM 是處于事件流中的非目標(biāo)元素，則先執(zhí)行捕獲，后執(zhí)行冒泡

事件委托是指將事件綁定目標(biāo)元素的到父元素上，利用冒泡機(jī)制觸發(fā)該事件

優(yōu)點(diǎn)：

可以減少事件注冊(cè)，節(jié)省大量?jī)?nèi)存占用

可以將事件應(yīng)用于動(dòng)態(tài)添加的子元素上

缺點(diǎn)： 使用不當(dāng)會(huì)造成事件在不應(yīng)該觸發(fā)時(shí)觸發(fā)

示例：

ulEl.addEventListener("click", function(e){
    var target = event.target || event.srcElement;
    if(!!target && target.nodeName.toUpperCase() === "LI"){
        console.log(target.innerHTML);
    }
}, false);

IE 只事件冒泡，不支持事件捕獲；火狐同時(shí)支持件冒泡和事件捕獲。

阻止冒泡：

取消默認(rèn)操作: w3c 的方法是 e.preventDefault()，IE 則是使用 e.returnValue = false;

return false javascript 的 return false 只會(huì)阻止默認(rèn)行為，而是用 jQuery 的話(huà)則既阻止默認(rèn)行為又防止對(duì)象冒泡。

阻止冒泡 w3c 的方法是 e.stopPropagation()，IE 則是使用 e.cancelBubble = true

[js] view plaincopy
function stopHandler(event)

    window.event?window.event.cancelBubble=true:event.stopPropagation();

}

參考鏈接:淺談 javascript 事件取消和阻止冒泡-開(kāi)源中國(guó) 2015

綁定事件

W3C: targetEl.addEventListener("click", handler, false);

IE: targetEl.attachEvent("onclick", handler);

刪除事件

W3C: targetEl.removeEventListener("click", handler, false);

IE: targetEl.detachEvent(event, handler);

事件對(duì)象

W3C: var e = arguments.callee.caller.arguments[0]

IE: window.event

事件目標(biāo)

W3C: e.target

IE: window.event.srcElement

阻止事件默認(rèn)行為

W3C: e.preventDefault()

IE: window.event.returnValue = false"

阻止事件傳播

W3C: e.stopPropagation()

IE: window.event.cancelBubble = true

target 只會(huì)出現(xiàn)在事件流的目標(biāo)階段

currentTarget 可能出現(xiàn)在事件流的任何階段

當(dāng)事件流處在目標(biāo)階段時(shí)，二者的指向相同

當(dāng)事件流處于捕獲或冒泡階段時(shí)：currentTarget 指向當(dāng)前事件活動(dòng)的對(duì)象(一般為父級(jí))

W3C: 使用 dispatchEvent 方法

IE: 使用 fireEvent 方法

var fireEvent = function(element, event){
    if (document.createEventObject){
        var mockEvent = document.createEventObject();
        return element.fireEvent("on" + event, mockEvent)
    }else{
        var mockEvent = document.createEvent("HTMLEvents");
        mockEvent.initEvent(event, true, true);
        return !element.dispatchEvent(mockEvent);
    }
}

函數(shù)節(jié)流(throttle)是指阻止一個(gè)函數(shù)在很短時(shí)間間隔內(nèi)連續(xù)調(diào)用。 只有當(dāng)上一次函數(shù)執(zhí)行后達(dá)到規(guī)定的時(shí)間間隔，才能進(jìn)行下一次調(diào)用。 但要保證一個(gè)累計(jì)最小調(diào)用間隔（否則拖拽類(lèi)的節(jié)流都將無(wú)連續(xù)效果）

函數(shù)節(jié)流用于 onresize, onscroll 等短時(shí)間內(nèi)會(huì)多次觸發(fā)的事件

函數(shù)節(jié)流的原理：使用定時(shí)器做時(shí)間節(jié)流。 當(dāng)觸發(fā)一個(gè)事件時(shí)，先用 setTimout 讓這個(gè)事件延遲一小段時(shí)間再執(zhí)行。 如果在這個(gè)時(shí)間間隔內(nèi)又觸發(fā)了事件，就 clearTimeout 原來(lái)的定時(shí)器， 再 setTimeout 一個(gè)新的定時(shí)器重復(fù)以上流程。

函數(shù)節(jié)流簡(jiǎn)單實(shí)現(xiàn)：

function throttle(method, context) {
     clearTimeout(methor.tId);
     method.tId = setTimeout(function(){
         method.call(context);
     }， 100); // 兩次調(diào)用至少間隔 100ms
}
// 調(diào)用
window.onresize = function(){
    throttle(myFunc, window);
}

客戶(hù)區(qū)坐標(biāo)：鼠標(biāo)指針在可視區(qū)中的水平坐標(biāo)(clientX)和垂直坐標(biāo)(clientY)

頁(yè)面坐標(biāo)：鼠標(biāo)指針在頁(yè)面布局中的水平坐標(biāo)(pageX)和垂直坐標(biāo)(pageY)

屏幕坐標(biāo)：設(shè)備物理屏幕的水平坐標(biāo)(screenX)和垂直坐標(biāo)(screenY)

elem.offsetLeft：返回元素相對(duì)于其定位父級(jí)左側(cè)的距離

elem.offsetTop：返回元素相對(duì)于其定位父級(jí)頂部的距離

elem.getBoundingClientRect()：返回一個(gè) DOMRect 對(duì)象，包含一組描述邊框的只讀屬性，單位像素

parseInt("1", 0);  // 1
parseInt("2", 1);  // NaN
parseInt("3", 2);  // NaN

  [].forEach.call($$("*"), function(el){
      el.style.outline = "1px solid #" + (~~(Math.random()*(1<<24))).toString(16);
  })

// 使用instanceof （待完善）
   if(a instanceof Person){
       alert("yes");
   }

function createObject(name,age,profession){//集中實(shí)例化的函數(shù)var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + " at " + this.age + " engaged in " + this.profession;
    };
    return obj;
}
var test1 = createObject("trigkit4",22,"programmer");//第一個(gè)實(shí)例var test2 = createObject("mike",25,"engineer");//第二個(gè)實(shí)例

function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error("obj 不是一個(gè)對(duì)象！")
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [] : {}
    for (let key in obj) {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    }

    return cloneObj
}

// 代理法
function deepClone(obj) {
    if (!isObject(obj)) {
        throw new Error("obj 不是一個(gè)對(duì)象！")
    }

    let isArray = Array.isArray(obj)
    let cloneObj = isArray ? [...obj] : { ...obj }
    Reflect.ownKeys(cloneObj).forEach(key => {
        cloneObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
    })

    return cloneObj
}

var date = new Date();
date.setDate(date.getDate() - 1);//真正的刪除

  document.cookie = "user="+ encodeURIComponent("name")  + ";expires = " + new Date(0)

function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));