歡迎您光臨本站 註冊首頁

JS原型對象操作實例分析

←手機掃碼閱讀     retouched @ 2020-06-12 , reply:0

本文實例講述了JS原型對象操作。分享給大家供大家參考,具體如下:

萬物皆對象,函數也同樣是對象,是特殊的函數對象

  function fn() {}  let a = new fn();  let b = new Function()    console.log(typeof a);  // object   console.log(typeof b);  // function

 

打開瀏覽器,輸入fn,會發現fn有一個prototype(原型)屬性,這個屬性是一個指針,指向原型對象,這個對象包括了特定類型所有共享的屬性和方法。
 換句話說,prototype對象包含了函數所有的共享屬性和方法。

  function fn() {}  fn.prototype.a = 18;  fn.prototype.b = "b";  fn.prototype.test = function() {   console.log(123);    }  var r = new fn();  console.log(r.a);  // 18

 

我們直接在函數fn的原型屬性上加了兩個屬性和一個方法,實例化後便可以訪問原型中的值。

  • 原型對象有一個constructor屬性,它也是一個指針,它指向原來的函數,也就是說,fn.prototype.constructor == fn。

  • 所有的實例都有這個原型對象,因此實例可以訪問到原型對象中的屬性和方法。

那麼實例怎麼搜索變量或者方法的值呢?首先,函數實例會在函數本身上去尋找該變量,如果沒有找到,會在原型對象上尋找變量。

  function fn() {}  fn.prototype.a = 18;  fn.prototype.b = "b";  fn.prototype.test = function() {   console.log(123);  }  var a = new fn();  var b = new fn();  b.a = 20  console.log(b.a);  // 20  console.log(a.a);  // 18

 

創建了兩個實例,在b實例上手動添加了一個a屬性,在fn的原型對象上也有一個a屬性,那麼對於b實例會優先訪問本身的屬性而不是原型上的屬性。


[retouched ] JS原型對象操作實例分析已經有262次圍觀

http://coctec.com/docs/javascript/show-post-238232.html