溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中對(duì)象的定義和繼承詳解

發(fā)布時(shí)間：2020-09-29 01:30:52 來源：腳本之家 閱讀：143 作者：chelen_jak 欄目：web開發(fā)

本文實(shí)例講述了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中對(duì)象的定義和繼承。分享給大家供大家參考，具體如下：

在面向?qū)ο蟮腏avascript編程中，希望代碼優(yōu)雅有高效是非常重要的。javascript中不存在類的概念，只有對(duì)象。要想把Javascript代碼寫的像java 或者C++一樣優(yōu)雅，就得考慮如何去實(shí)現(xiàn)，同時(shí)也要考慮性能和高效。定義javascript對(duì)象的方式有很多，繼承的方式也很多。通過不斷地實(shí)踐，推薦如下的方法：

1.Javascript對(duì)象的定義采用混合方式【構(gòu)造函數(shù) +原型方式（prototype）】

（1）通過構(gòu)造函數(shù)方式定義對(duì)象的所有非函數(shù)屬性

（2）用原型方式定義對(duì)象的函數(shù)屬性

采用這種方式，所有的屬性都是單一對(duì)象私有的，而方法則是所有對(duì)象公有的，對(duì)象之間的屬性不相互干擾，各個(gè)對(duì)象間共享同一個(gè)方法。

//使用原型+構(gòu)造函數(shù)方式來定義對(duì)象
//構(gòu)造函數(shù)定義對(duì)象的非函數(shù)屬性<strong>
function Person()
{
    this.username = new Array();
    this.password = "123";
}
//通過原型方式定義對(duì)象的函數(shù)
Person.prototype.getInfo = function()
{
    alert(this.username+","+this.password);
};
var p = new Person();
var p2 = new Person();
p.username.push("zhangsan");
p2.username.push("lisi");
p.getInfo();
p2.getInfo();

在現(xiàn)實(shí)的開發(fā)過程中，我們可能希望開發(fā)的各個(gè)類（實(shí)質(zhì)是對(duì)象）能像java程序中放到一個(gè)包中統(tǒng)一管理，統(tǒng)一使用，而各個(gè)對(duì)象相互獨(dú)立，同時(shí)避免對(duì)象重名等等因素，我們需要給每個(gè)類有個(gè)作用域，此時(shí)我們采用將對(duì)象放到自定匿名函數(shù)的方式來解決，這一點(diǎn)和jQuery開發(fā)插件的有點(diǎn)類似。代碼如下：

/**
 * @author jasson
 * @include common.js
 */
//對(duì)象存在就等于對(duì)象，對(duì)象不存在就創(chuàng)建{}
var JassonChart = JassonChart || {};
(function(){
  //構(gòu)造函數(shù)定義對(duì)象的非函數(shù)屬性
  function Person()
  {
    this.username = new Array();
    this.password = "123";
  }
  //通過原型方式定義對(duì)象的函數(shù)
  Person.prototype.getInfo = function()
  {
      alert(this.username+","+this.password);
  };
  //將該類放到JassonChart中，類似java中的包，或者C++中的
  JassonChart.Person= Person;
}());
//調(diào)用該類庫中的Person類
var p = new JassonChart.Person();

這樣我們可以定義多個(gè)類，每個(gè)類都采用如上的方式實(shí)現(xiàn)，這樣各個(gè)類相互都有作用域，非常規(guī)范。對(duì)于我們要用到的一些工具類，我們可以采用簡(jiǎn)單的對(duì)象進(jìn)行定義，代碼如下

/**
* @author jasson
*/
var JassonChart = JassonChart || {};
JassonChart .util = {
constants : {
WIDTH : 'width',
HEIGHT : 'height',
SVG : 'SVG',
CANVAS : 'CANVAS',
G : 'G', //svg element
STRING : 'string'
},
distance : function(a, b) {
var dx = a.x - b.x;
var dy = a.y - b.y;
return Math.sqrt(dx * dx + dy * dy);
}
};

2.Javascript對(duì)象的繼承采用如下幾種方式

2.1 Javascript對(duì)象的繼承采用混合方式【構(gòu)造函數(shù) +原型方式（prototype）】

在JavaScript中最好的方式就是用混合方式實(shí)現(xiàn)對(duì)象間的繼承。和定義對(duì)象一樣，我們可以將屬性和方法用不同的方式定義，用call或apply方式定義繼承對(duì)象的屬性，利用原型鏈的方式實(shí)現(xiàn)方法的繼承。如下代碼所示：

//使用混合的方式實(shí)現(xiàn)對(duì)象的繼承
function Parent(hello)
{
  this.hello = hello;//定義父類的屬性
}
Parent.prototype.sayHello = function()//定義父類的方法
{
  alert(this.hello);
}
function Child(hello,world)
{
  Parent.call(this,hello);//繼承父類的屬性
  //or Parent.apply(this,arguments);//繼承父類的屬性
  this.world = world;
}
Child.prototype = new Parent();//繼承父類的方法
Child.prototype.sayWorld = function()
{
  alert(this.world);
}
var child = new Child("hello","world");
child.sayHello();
child.sayWorld();

2.2 深度拷貝方法

所謂"深拷貝"，就是能夠?qū)崿F(xiàn)真正意義上的數(shù)組和對(duì)象的拷貝。它的實(shí)現(xiàn)并不難，只要遞歸調(diào)用"淺拷貝"就行了。

function deepCopy(p, c) {
  var c = c || {};
  for (var i in p) {
  if (typeof p[i] === 'object') {
    c[i] = (p[i].constructor === Array) ? [] : {};
deepCopy(p[i], c[i]);
} else {
c[i] = p[i];
}
}
return c;
}

使用的時(shí)候這樣寫：

var Doctor = deepCopy(Chinese);

現(xiàn)在，給父對(duì)象加一個(gè)屬性，值為數(shù)組。然后，在子對(duì)象上修改這個(gè)屬性：

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('廈門');

這時(shí)，父對(duì)象就不會(huì)受到影響了。

alert(Doctor.birthPlaces); //北京, 上海, 香港, 廈門
alert(Chinese.birthPlaces); //北京, 上海, 香港

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手