前端筆記——JS基礎(chǔ)（原型&&原型鏈）

n7then 發(fā)布于2019-08-22 18:02 / 2745人閱讀

摘要：基礎(chǔ)原型原型鏈構(gòu)造函數(shù)默認(rèn)有這一行張三李四構(gòu)造函數(shù)擴(kuò)展其實(shí)是的語(yǔ)法糖其實(shí)是的語(yǔ)法糖其實(shí)是使用判斷一個(gè)函數(shù)是否是一個(gè)變量的構(gòu)造函數(shù)原型規(guī)則和示例所有的引用類型數(shù)組對(duì)象函數(shù)，都具有對(duì)象屬性即可自有擴(kuò)展的屬性，除外所有的引用類型數(shù)組對(duì)象函數(shù)，

JavaScript基礎(chǔ) —— 原型&&原型鏈 構(gòu)造函數(shù)

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

構(gòu)造函數(shù) - 擴(kuò)展

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

原型規(guī)則和示例

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

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

  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

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

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

所有的引用類型(數(shù)組、對(duì)象、函數(shù)), __proto__ 屬性值指向它的構(gòu)造函數(shù)的 prototype 屬性值

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

當(dāng)視圖得到一個(gè)對(duì)象(所有的引用類型)的某個(gè)屬性時(shí)，如果這個(gè)對(duì)象本身沒(méi)有這個(gè)屬性，那么會(huì)去它的 __proto__ (即它的構(gòu)造函數(shù)的 prototype )中尋找。

  // 構(gòu)造函數(shù)
  function Foo(name, age) {
    this.name = name;
  }
  Foo.prototype.alertName = function() {
    console.log("alertName" + this.name);
  }
  // 創(chuàng)建示例
  var f = new Foo("張三");
  f.prientname = function() {
    console.log("prientname" + this.name);
  }
  // 測(cè)試
  f.prientname(); // prientname張三
  f.alertName(); // alertName張三

原型鏈

  // 構(gòu)造函數(shù)
  function Foo(name, age) {
    this.name = name;
  }
  Foo.prototype.alertName = function() {
    console.log("alertName" + this.name);
  }
  // 創(chuàng)建示例
  var f = new Foo("張三");
  f.prientname = function() {
    console.log("prientname" + this.name);
  }
  // 測(cè)試
  f.prientname(); // prientname張三
  f.alertName(); // alertName張三

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

instanceof

instanceof 用于判斷 引用類型 屬于哪個(gè) 構(gòu)造函數(shù) 的方法

  // f的 __proto__ 一層一層網(wǎng)上找，找到對(duì)應(yīng)的 Foo.prototype
  f instanceof Foo //true
  f instanceof Object //true

q:如何準(zhǔn)確判斷一個(gè)變量是數(shù)組類型

  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 是無(wú)法判斷是否是數(shù)組的
  // 不準(zhǔn)確
  arr.constructor === Array //true 但是原型鏈可以被改寫(xiě)，這樣判斷不安全

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

q:寫(xiě)一個(gè)原型鏈繼承的例子

  function Elem(id) {
    this.elem = document.getElementById(id);
  }
  Elem.prototype.html = function(val) {
    var elem = this.elem;
    if (val) {
      elem.innerHTML = val;
      return this; // 后續(xù)的鏈?zhǔn)讲僮?    } 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 一個(gè)對(duì)象的過(guò)程

創(chuàng)建一個(gè)對(duì)象

this 指向這個(gè)新對(duì)象

執(zhí)行代碼，即對(duì) this 賦值

返回 this

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