前端筆記——JS基礎（原型&&原型鏈）

n7then 發布于2019-08-22 18:02 / 2733人閱讀

摘要：基礎原型原型鏈構造函數默認有這一行張三李四構造函數擴展其實是的語法糖其實是的語法糖其實是使用判斷一個函數是否是一個變量的構造函數原型規則和示例所有的引用類型數組對象函數，都具有對象屬性即可自有擴展的屬性，除外所有的引用類型數組對象函數，

JavaScript基礎 —— 原型&&原型鏈 構造函數

  function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = "class-1";
    //return this ; //默認有這一行
  }
  var f = new Foo("張三", 22);
  var f1 = new Foo("李四", 29);

構造函數 - 擴展

  var a={} 其實是 var a=new Object() 的語法糖
  var a=[] 其實是 var a=new Array() 的語法糖
  function Foo() {....} 其實是 var Foo=new Function(...)
  使用 instanceof 判斷一個函數是否是一個變量的構造函數

原型規則和示例

所有的引用類型(數組、對象、函數)，都具有對象屬性(即可自有擴展的屬性)，null除外

所有的引用類型(數組、對象、函數)，都有一個 __proto__ 屬性(隱式原型)，屬性值是一個普通的對象

  var obj = { };
  obj.x=100;
  console.log(obj.__proto__);
  // {constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?, __lookupGetter__: ?,?…}
  var arr = [];
  arr.x = 200;
  console.log(arr.__proto__);
  // [constructor: ?, concat: ?, find: ?, findIndex: ?, pop: ?,?…]
  function fn() {};
  fn.x = 300;
  console.log(fn.__proto__);
  // ? () { [native code] }
  var d = null;
  console.log(d.__proto__);
  // Uncaught TypeError: Cannot read property "__proto__" of null

所有的函數，都有一個 prototype 屬性(顯式原型)，屬性值也是一個普通對象

  console.log(fn.prototype);
  // {constructor: ?}

所有的引用類型(數組、對象、函數), __proto__ 屬性值指向它的構造函數的 prototype 屬性值

  console.log(obj.__proto__ === Object.prototype);
  // true

當視圖得到一個對象(所有的引用類型)的某個屬性時，如果這個對象本身沒有這個屬性，那么會去它的 __proto__ (即它的構造函數的 prototype )中尋找。

  // 構造函數
  function Foo(name, age) {
    this.name = name;
  }
  Foo.prototype.alertName = function() {
    console.log("alertName" + this.name);
  }
  // 創建示例
  var f = new Foo("張三");
  f.prientname = function() {
    console.log("prientname" + this.name);
  }
  // 測試
  f.prientname(); // prientname張三
  f.alertName(); // alertName張三

原型鏈

  // 構造函數
  function Foo(name, age) {
    this.name = name;
  }
  Foo.prototype.alertName = function() {
    console.log("alertName" + this.name);
  }
  // 創建示例
  var f = new Foo("張三");
  f.prientname = function() {
    console.log("prientname" + this.name);
  }
  // 測試
  f.prientname(); // prientname張三
  f.alertName(); // alertName張三

  f.toString(); // "[object Object]" 在f.__proto__.__proto__中查找，即Object的顯式原型中尋找

instanceof

instanceof 用于判斷 引用類型 屬于哪個 構造函數 的方法

  // f的 __proto__ 一層一層網上找，找到對應的 Foo.prototype
  f instanceof Foo //true
  f instanceof Object //true

q:如何準確判斷一個變量是數組類型

  var arr=[]
  // 可以正確判斷的情況
  arr instanceof Array //true
  Object.prototype.toString.call(arr) // "[object Array]"
  Object.prototype.toString.apply(arr) // "[object Array]"
  Array.isArray(arr) // true
  // 不能判斷的情況
  typeof arr // object 是無法判斷是否是數組的
  // 不準確
  arr.constructor === Array //true 但是原型鏈可以被改寫，這樣判斷不安全

  // 擴展 兼容老版本瀏覽器，isArray的寫法
  if(!Array.isArray){
    Array.isArray = function(arg){
      return Object.property.toString.call(arg) === "[object Array]"
    }
  }

q:寫一個原型鏈繼承的例子

  function Elem(id) {
    this.elem = document.getElementById(id);
  }
  Elem.prototype.html = function(val) {
    var elem = this.elem;
    if (val) {
      elem.innerHTML = val;
      return this; // 后續的鏈式操作
    } else {
      return elem.innerHTML;
    }
  }
  Elem.prototype.on = function(type, fn) {
    var elem = this.elem;
    elem.addEventListener(type, fn);
    return this;
  }
  var main = new Elem("main")
  main.html("Hello World").on("click", function() {
    alert("Hello javascript")
  })

q:描述 new 一個對象的過程

創建一個對象

this 指向這個新對象

執行代碼，即對 this 賦值

返回 this

  function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.class = "class-1";
    //return this ; //默認有這一行
  }
  var f = new Foo("張三", 22);
  var f1 = new Foo("李四", 29);

GPU云服務器云服務器 js原型鏈的繼承原型原型鏈原型鏈原型鏈繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95434.html

溫故js系列（15）-原型&amp;原型鏈&amp;原型繼承

摘要：給添加屬性給的原型對象添加屬性原型鏈在中，每個對象都有一個屬性，其保存著的地址就構成了對象的原型鏈。實例變量實例函數原型鏈繼承有了原型鏈，就可以借助原型鏈實現繼承。是中唯一一個處理屬性但是不查找原型鏈的函數。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：原型&原型鏈&原型繼承 JavaScript-原...

Ethan815 2019-08-22 10:37 評論0 收藏0
《你不知道的javascript》筆記_對象&amp;原型

摘要：上一篇你不知道的筆記寫在前面這是年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響年是向上的一年在新的城市穩定連續堅持健身三個月早睡早起游戲時間大大縮減，學會生活。上一篇：《你不知道的javascript》筆記_this 寫在前面這是2019年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響2018年是向上的一年：在新的城市穩定、...

seasonley 2019-08-23 14:32 評論0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同學去面試，做了兩道面試題全部做錯了，發過來給道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。排序算法 -- JavaScript 標準參考教程（alpha） - 前端 - 掘金來自《JavaScript 標準參考教程（alpha）》，by 阮一峰目錄冒泡排序簡介算法實現選擇排序簡介算法實現 ... 圖例詳解那道 setTimeout 與循環閉包的經典面...

enali 2019-08-20 16:36 評論0 收藏0
匯總有關JS對象的創建與繼承

　　之前也有和大家講過有關JS的對象創建和對象繼承，本篇文章主要為大家做個匯總和梳理?！　S中其實就是原型鏈繼承和構造函數繼承的毛病，還有就是工廠、構造、原型設計模式與JS繼承。 JS高級程序設計4：class繼承的重點，不只是簡簡單單的語法而已。　　對象創建　　不難發現，每一篇都離不開工廠、構造、原型這3種設計模式中的至少其一！　　那JS為什么非要用到這種3種設計模式了呢？？　　我們先從對...

3403771864 2023-03-27 18:33 評論0 收藏0