DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 在JavaScript中模擬類(class)及類的繼承關系
在JavaScript中模擬類(class)及類的繼承關系
編輯:關於JavaScript     

Javascipt語法不支持"類"(class)[es6已經支持],但是有模擬類的方法。今天我主要談談Javascipt中模擬“類”的方法及js中繼承的總結和回顧。

js中實現“類”與繼承,既是重點,又是難點。很多同學可能都對js中“類”與繼承都有所了解,但是深入剖析的時候,感覺力不從心、模稜兩可。
我們先來總結一下js定義“類”的幾種方法:

方法一:構造函數法

這個方法是比較經典的方法,我們會經常見到。生成實例的時候,使用new關鍵字。類的屬性和方法,還可以定義在構造函數的prototype對象之上。

function Person(name,age,job){
 this.name=name;
 this.age=age;
 this.job=job;
}

Person.prototype.sayName=function(){
 alert(this.name);
}

var person1 = new Person("張三","29","web frontpage manager");
var person2 = new Person("李四","22","doctor");


person1.sayName(); //彈出"張三"
console.log(person2.name)//輸出“李四”

方法二:Object.create()法

方法Object.creat()作為new操作符的替代方案是ES5之後才出來的。用這個方法,"類"就是一個對象,不是函數。

var myMammal = {
 name : 'Herb the Mammal',
 get_name : function () {
 return this.name;
 },
 says : function () {
 return this.saying || '';
 }
}

var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.get_name = function () {
 console.log(this.says + ' ' + this.name + this.says);
}

myCat.get_name();

輸出:

function () {
 return this.saying || '';
 } Henriettafunction () {
 return this.saying || '';
 }

目前,各大浏覽器的最新版本(包括IE9)都部署了這個方法。如果遇到老式浏覽器,可以用下面的代碼自行部署。

  if (!Object.create) {
    Object.create = function (o) {
       function F() {}
      F.prototype = o;
      return new F();
    };
  }

方法三:極簡主義法

封裝

這種方法不使用this和prototype,代碼部署起來非常簡單。 首先,它也是用一個對象模擬"類"。在這個類裡面,定義一個構造函數creatFn(),用來生成實例。

  var Dog= {
    creatFn: function(){
      // some code here
    }
  };

然後,在creatFn()裡面,定義一個實例對象,把這個實例對象作為返回值。

  var Dog= {
    creatFn: function(){
      var dog= {};
      dog.name = "狗狗";
      dog.makeSound = function(){ alert("汪汪汪"); };
      return dog;
    }
  };

使用的時候,調用creatFn()方法,就可以得到實例對象。

  var dog1 = Dog.creatFn();
  dog1.makeSound(); // 汪汪汪

這種方法的好處是,容易理解,結構清晰優雅,符合傳統的"面向對象編程"的構造,因此可以方便地部署下面的特性。

繼承

讓一個類繼承另一個類,實現起來很方便。只要在前者的creatFn()方法中,調用後者的creatFn()方法即可。 先定義一個Animal類。

  var Animal = {
    creatFn: function(){
      var animal = {};
      animal.eat= function(){ alert("吃飯飯"); };
      return animal;
    }
  };

然後,在Dog的creatFn()方法中,調用Animal的creatFn()方法。

  var Dog= {
    creatFn: function(){
      var dog= Animal.creatFn();
      dog.name = "狗狗";
      dog.makeSound = function(){ alert("汪汪汪"); };
      return dog;
    }
  };

這樣得到的Dog實例,就會同時繼承Dog類和Animal類。

  var dog1= Dog.creatFn();
  dog1.eat(); // 吃飯飯

私有屬性和私有方法

在creatFn()方法中,只要不是定義在dog對象上的方法和屬性,都是私有的。

  var Dog= {
    creatFn: function(){
      var dog= {};
      var sound = "汪汪汪";
      dog.makeSound = function(){ alert(sound); };
      return dog;
    }
  };

上例的內部變量sound,外部無法讀取,只有通過dog的公有方法makeSound()來讀取。

  var dog1 = Dog.creatFn();
  alert(dog1.sound); // undefined

數據共享

有時候,我們需要所有實例對象,能夠讀寫同一項內部數據。這個時候,只要把這個內部數據,封裝在類對象的裡面、creatFn()方法的外面即可。

  var Dog= {
    sound : "汪汪汪",
    creatFn: function(){
      var dog= {};
      dog.makeSound = function(){ alert(Dog.sound); };
      dog.changeSound = function(x){ Dog.sound = x; };
      return dog;
    }
  };

然後,生成兩個實例對象:

  var dog1 = Dog.creatFn();
  var dog2 = Dog.creatFn();
  dog1.makeSound(); // 汪汪汪

這時,如果有一個實例對象,修改了共享的數據,另一個實例對象也會受到影響。

  dog2.changeSound("嗚嗚嗚");
  dog1.makeSound(); //嗚嗚嗚

js繼承

關於繼承,網上也有很多資料可以查詢,但是很多朋友對其理解的不夠深入。講到繼承,假如你不去查資料,猛地一下,可能說不出個所以然來。這就說明我們的基礎知識打的不夠扎實。沒有理解透徹。今天,我站在前輩的基礎之上,再來和大家一起回顧一下這個 繼承。

繼承最常用的兩種方式如下:

  • 原型鏈繼承(對象間的繼承)
  • 類式繼承(構造函數間的繼承)

原型鏈繼承

什麼是原型鏈繼承?這裡我就不說什麼定義了。其實就是用prototype繼承父級。

舉個例子:

function Parent(){
 this.name = 'mike';
} 
function Child(){
 this.age = 12;
}
Child.prototype = new Parent();//Child繼承Parent,通過原型,形成鏈條

var test = new Child();
alert(test.age);
alert(test.name);//得到被繼承的屬性
//繼續原型鏈繼承
function Brother(){ //brother構造
 this.weight = 60;
}
Brother.prototype = new Child();//繼續原型鏈繼承
var brother = new Brother();
alert(brother.name);//繼承了Parent和Child,彈出mike
alert(brother.age);//彈出12

上面例子,通過原型,形成鏈條,Child繼承了Parent,Brother有繼承了Child,最後brother既有Child和Parent的屬性,又有自己的屬性。這就是原形鏈的繼承。

類式繼承(借用構造函數)

類式繼承一般是通過運用call或者apply 進行子類型構造函數的內部調用超類型的構造函數。舉個例子:

function Parent(age){
 this.name = ['mike','jack','smith'];
 this.age = age;
}

function Child(age){
 Parent.call(this,age);
}
var test = new Child(21);
alert(test.age);//21
alert(test.name);//mike,jack,smith
test.name.push('bill');
alert(test.name);//mike,jack,smith,bill

上面的兩種繼承是最基本的兩種繼承方式。

此外還有一些繼承方式,我們一起來看一下!

組合繼承

組合繼承通常是上面兩種繼承方式組合在一起使用的繼承方式。

舉例如下:

function Parent(age){
 this.name = ['mike','jack','smith'];
 this.age = age;
}
Parent.prototype.run = function () {
 return this.name + ' are both' + this.age;
};
function Child(age){
 Parent.call(this,age);//對象冒充,給超類型傳參
}
Child.prototype = new Parent();//原型鏈繼承
var test = new Child(21);//寫new Parent(21)也行
alert(test.run());//mike,jack,smith are both21

原型式繼承

和上面講的原形鏈式繼承只有一字之差,但是不是同一個內容。我們所說的原型式繼承,就是我們上節課所講的,通過Object.create()方式來創建新的類。因為這種方式老式浏覽器不支持。因此,假如我們不用Object.create(),也可以有替代法,方式如下:

 function obj(o){
 function F(){}
 F.prototype = o;
 return new F();
 }

這個函數,就實現了我們Object.create()創建類的方式!

因此舉例如下:

 function obj(o){
 function F(){}
 F.prototype = o;
 return new F();
 }
var box = {
 name : 'trigkit4',
 arr : ['brother','sister','baba']
};
var b1 = obj(box);
alert(b1.name);//trigkit4

b1.name = 'mike';
alert(b1.name);//mike

alert(b1.arr);//brother,sister,baba
b1.arr.push('parents');
alert(b1.arr);//brother,sister,baba,parents

var b2 = obj(box);
alert(b2.name);//trigkit4
alert(b2.arr);//brother,sister,baba,parents

寄生式繼承

舉例如下:

function creatAnother(original){
 var clone=new Object(original);
 clone.sayHi=function(){
 alert("hi")
 };
 return clone;
}
var person={
 name:"haorooms",
 friends:["hao123","zhansan","lisi"]
}

var antherPerson=creatAnother(person);
antherPerson.sayHi();//hi

寄生組合式

function inheritPrototype (subType,superType) {
 var prototype = Object.creat(superType.prototype);
 prototype.constructor = subType;
 subType.prototype = prototype;
};

function SuperType (name) {
 this.name = name;
 this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
 console.log(this.name);
}
function SubType(name, age) {
 //繼承屬性
 SuperType.call(this,name);
 this.age = age;
}
//繼承方法
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge = function () {
 console.log(this.age);
}

var instance = new SubType();

類的繼承,基本上就是如上幾種方式。下面再簡單的說一下ES6的class類吧!

es6實現類

//定義類
class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }
 toString() {
 return '('+this.x+', '+this.y+')';
 }
}
var point = new Point(2, 3);
point.toString() // (2, 3)
point.hasOwnProperty('x') // true
point.hasOwnProperty('y') // true
point.hasOwnProperty('toString') // false
point.__proto__.hasOwnProperty('toString') // true

Class的繼承

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved