性能、類葡缰、繼承亏掀、對象

如何編寫高性能的JavaScript?

遵循嚴(yán)格模式:"use strict";
將js腳本放在頁面底部泛释,加快渲染頁面
將js腳本將腳本成組打包滤愕,減少請求
使用非阻塞方式下載js腳本
盡量使用局部變量來保存全局變量
盡量減少使用閉包
使用 window 對象屬性方法時(shí),省略 window
盡量減少對象成員嵌套
緩存 DOM 節(jié)點(diǎn)的訪問
通過避免使用 eval() 和 Function() 構(gòu)造器
給 setTimeout() 和 setInterval() 傳遞函數(shù)而不是字符串作為參數(shù)
盡量使用直接量創(chuàng)建對象和數(shù)組
最小化重繪(repaint)和回流(reflow)

JavaScript如何實(shí)現(xiàn)一個(gè)類怜校,怎么實(shí)例化這個(gè)類间影?

構(gòu)造函數(shù)法(this + prototype) -- 用 new 關(guān)鍵字 生成實(shí)例對象
缺點(diǎn):用到了 this 和 prototype,編寫復(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í)例對象
缺點(diǎn):不能實(shí)現(xiàn)私有屬性和私有方法,實(shí)例對象之間也不能共享數(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();
  };
 }

極簡主義法(消除 this 和 prototype) -- 調(diào)用 createNew() 得到實(shí)例對象
優(yōu)點(diǎn):容易理解随橘,結(jié)構(gòu)清晰優(yōu)雅,符合傳統(tǒng)的"面向?qū)ο缶幊?的構(gòu)造

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

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

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

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

  var point = new Point(2, 3);

Javascript如何實(shí)現(xiàn)繼承?

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

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

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

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

拷貝繼承:如果把父對象的所有屬性和方法萝嘁,拷貝進(jìn)子對象

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

原型繼承:將子對象的 prototype 指向父對象的 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 語法糖 extends:class ColorPoint extends Point {}

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

javascript創(chuàng)建對象的幾種方式梆掸?

javascript創(chuàng)建對象簡單的說,無非就是使用內(nèi)置對象或各種自定義對象,當(dāng)然還可以用JSON牙言;但寫法有很多種酸钦,也能混合使用

對象字面量的方式

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

用function來模擬無參的構(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來模擬參構(gòu)造函數(shù)來實(shí)現(xiàn)(用this關(guān)鍵字定義構(gòu)造的上下文屬性)

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

用工廠方式來創(chuàng)建(內(nèi)置對象)

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

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

function Dog(){

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

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

 function Car(name,price){
      this.name=name;
      this.price=price; 
    }
     Car.prototype.sell=function(){
       alert("我是"+this.name+"卑硫,我現(xiàn)在賣"+this.price+"萬元");
      }
    var camry =new Car("凱美瑞",27);
    camry.sell(); 
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市蚕断,隨后出現(xiàn)的幾起案子欢伏,更是在濱河造成了極大的恐慌,老刑警劉巖亿乳,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件硝拧,死亡現(xiàn)場離奇詭異,居然都是意外死亡葛假,警方通過查閱死者的電腦和手機(jī)障陶,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來聊训,“玉大人咸这,你說我怎么就攤上這事∧д#” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵酿雪,是天一觀的道長遏暴。 經(jīng)常有香客問我,道長指黎,這世上最難降的妖魔是什么朋凉? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮醋安,結(jié)果婚禮上杂彭,老公的妹妹穿的比我還像新娘。我一直安慰自己吓揪,他們只是感情好亲怠,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著柠辞,像睡著了一般团秽。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天习勤,我揣著相機(jī)與錄音踪栋,去河邊找鬼。 笑死图毕,一個(gè)胖子當(dāng)著我的面吹牛夷都,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播予颤,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼囤官,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了荣瑟?” 一聲冷哼從身側(cè)響起治拿,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎笆焰,沒想到半個(gè)月后劫谅,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡嚷掠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年捏检,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片不皆。...
    茶點(diǎn)故事閱讀 40,488評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡贯城,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出霹娄,到底是詐尸還是另有隱情能犯,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布犬耻,位于F島的核電站踩晶,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏枕磁。R本人自食惡果不足惜渡蜻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望计济。 院中可真熱鬧茸苇,春花似錦、人聲如沸沦寂。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽传藏。三九已至则果,卻和暖如春幔翰,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背西壮。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工遗增, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人款青。 一個(gè)月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓做修,卻偏偏與公主長得像,于是被迫代替她去往敵國和親抡草。 傳聞我的和親對象是個(gè)殘疾皇子饰及,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容