1. 程式人生 > >JavaScript(十三)面向對象

JavaScript(十三)面向對象

所有 scrip call 執行函數 一定的 指向 cal ole 構造函數

  面向對象

面向對象的過程

  通過new 構造函數 生成的對象來執行, 類似於事件的執行 this指向函數,然後再把這個函數賦值給一個實例 所以在函數內的this 就指到了實例上

function Person (age,lastname,) {
      this.age = age
      this.lastname = lastname;
    }
 var xiaoming = new Person(12,‘小明‘);
 console.log(xiaoming);

技術分享圖片

構造函數的首字母要大寫   大家默認的規範

對象中若 value 非函數 叫做屬性 若 是函數 叫方法

this的指向

  普通對象,計時器,定時器,this 質量window

  對象中的方法的this 指向這個對象,這個對象就和windows類似

  綁定事件時 this指向 dom對象

  閉包的this 指向上次運行的函數環境

  自執行函數 指向window

  對象中的定時器等的this仍是指向window 所以需要在對象內備份 this

實例與構造函數的關系

  新生成的對象 有個屬性 constructor 就是這個對象的構造函數

  實例 instanceof 構造函數  ---->true

console.log(xiaoming.constructor);
console.log(xiaoming 
instanceof Person);

技術分享圖片

面向對象中的類的概念

  就是 構造函數 ,同一個構造函數 new出來的 就屬於一個類

原型

  構造函數方法存在一定的弊端,對於對象中一成不變的屬性 並不需要每次都new ,這樣很浪費性能,那麽 就把這用一成不變的存儲到 構造函數的原型上面

    function Person (age,name,) {
      this.age = age;
      this.name = name;
    }
    Person.prototype.sex = ‘male‘;

    var xiaoming = new Person(12,‘xiaoming‘);
    console.log(xiaoming.sex);//這個性別就是從原型上繼承的

  構造函數的原型除了以 fun.prototype.attr = ***; 的格式

  還可以 寫整個 原型

Person.prototype = {
    age : 12,
    sex:male,
    constructor : Person //這裏如果不寫 new的實例調用constrotur 不會返回person 而返回 Object
}

prototype和__proto__

prototype     所有的函數都有原型prototype

.__proto__    所有的對象都有原型對象 ∵所有的對象都是用構造函數創建的

constructor,protype與__proto__技術分享圖片

判斷這個實例是不是這個構造函數new的

  構造函數的原型 .isProtypeOf(新對象)

  技術分享圖片

利用 in 結合 hasOwnProperty判斷是不是從原型繼承來的屬性

for (var pro in xiaoming) {
  if(xiaoming.hasOwnProperty(pro)){
        console.log(pro + ‘是本地屬性‘)
    }  
}

技術分享圖片

綁定構造函數 兩個對象(構造函數之間)繼承

  1.call / apply 用父類 代替子類的this

    父構造函數.call(this,[arguments])  

 function Foo () {
     this.lastName = ‘wang‘;
   }

  function Son (height) {
    Foo.call(this);  //就這一步就可以繼承來 Foo的屬性
    this.height = height;
  }

  var xw = new Son(180);
  console.log(xw.lastName);  //wang

prototype的繼承方法

  寫在perotype 上的屬性在生成實例的時候不會被 調用 所以 實例上的屬性由繼承來的更好 提取公共部分在原型上

    function Foo() {
      this.firestName = ‘老王‘;
    }
    Foo.prototype.lastName = ‘wang‘;

    function Son() {
      this.firstName = ‘小王‘;
    }

    Son.prototype = new Foo();
    Son.prototype.constrotur = Son;

    var xw = new Son();
    console.log(xw.firstName);
    console.log(xw.lastName);
    console.log(xw.constrotur);

技術分享圖片

利用空的函數的prototype 實現繼承

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

拷貝繼承 就是把parent.protype 上的屬性 遍歷拷貝到 child 的protype上

function copy(parent, child) {
      var p = parent.prototype;
      var c = child.prototype;
      for (var pro in p) {
        c[pro] = p[pro]; //這裏的pro是屬性名!!!!是字符串形式的  所以只能用[]的形式
      }
      c.uber = p;
    }

JavaScript(十三)面向對象