js定義類的方法示例【ES5與ES6】

發(fā)布時(shí)間：2020-09-08 06:36:13 來(lái)源：腳本之家閱讀：205 作者：方小川欄目：web開發(fā)

本文實(shí)例講述了js定義類的方法。分享給大家供大家參考，具體如下：

以下是es5標(biāo)準(zhǔn)里定義類的方法：

<script>
function Point(x,y){
  this.x=x;
  this.y=y;
}
Point.prototype.toString=function(){
  return '('+this.x+', '+this.y+')';
}
var point=new Point(1,2);
console.log(point);
</script>

運(yùn)行結(jié)果：

js定義類的方法示例【ES5與ES6】

上面這樣用構(gòu)造函數(shù)和原型混合的方法定義類，是為了每次new新實(shí)例時(shí)可以共享方法，不用創(chuàng)建function新實(shí)例。所以只有函數(shù)屬性放在原型對(duì)象里定義，其他屬性都在構(gòu)造函數(shù)里定義。

es6里簡(jiǎn)化了類的定義方法：

<script>
class Point{
   constructor(x,y){
    this.x=x;
    this.y=y;
    }
    toString(){
     return '('+this.x+', '+this.y+')';
    }
}
let point=new Point(3,4);
console.log(point);
</script>

運(yùn)行結(jié)果：

js定義類的方法示例【ES5與ES6】

注意：類名首字母要大寫

（另：原文代碼中class Point(x,y)定義會(huì)導(dǎo)致運(yùn)行錯(cuò)誤，本文予以修正。）

感興趣的朋友可以使用在線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問(wèn)一下細(xì)節(jié)

js定義類的方法示例【ES5與ES6】

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽