歸納下js面向?qū)ο蟮膸追N常見寫法總結(jié)

更新時(shí)間：2016年08月24日 10:03:09 投稿：jingxian

下面小編就為大家?guī)硪黄獨(dú)w納下js面向?qū)ο蟮膸追N常見寫法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

//定義Circle類，擁有成員變量r，常量PI和計(jì)算面積的成員函數(shù)area()

1.工廠方式

var Circle = function() {
  var obj = new Object();
  obj.PI = 3.14159;
  
  obj.area = function( r ) {
    return this.PI * r * r;
  }
  return obj;
}

var c = new Circle();
alert( c.area( 1.0 ) );

2.比較正規(guī)的寫法

function Circle(r) {
   this.r = r;
}
Circle.PI = 3.14159;
Circle.prototype.area = function() {
 return Circle.PI * this.r * this.r;
}

var c = new Circle(1.0);  
alert(c.area());

3.json寫法

var Circle={
  "PI":3.14159,
 "area":function(r){
     return this.PI * r * r;
    }
};
alert( Circle.area(1.0) );

4.有點(diǎn)變化，但是實(shí)質(zhì)和第一種一樣

var Circle=function(r){
    this.r=r;
}
Circle.PI = 3.14159; 
Circle.prototype={
  area:function(){
    return this.r*this.r*Circle.PI;
  }
}
var obj=new Circle(1.0);
alert(obj.area())

Circle.PI = 3.14159; 能夠放入屬性中寫成this.PI=3.14159;

常用為第一種和第三種

第三種寫法的擴(kuò)展小實(shí)例

var show={
    btn:$('.div1'),
    init:function(){
      var that=this;
      alert(this);
      this.btn.click(function(){
          that.change();
          alert(this);
        })
      
    },
    change:function(){
      this.btn.css({'background':'green'});

    }
  }
  show.init();

需要注意的是this的指向問題

以上這篇?dú)w納下js面向?qū)ο蟮膸追N常見寫法總結(jié)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

寫法

相關(guān)文章

Bootstrap基本樣式學(xué)習(xí)筆記之按鈕(4)
篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之按鈕基本樣式的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
掃微信小程序碼實(shí)現(xiàn)網(wǎng)站登陸實(shí)現(xiàn)解析
這篇文章主要介紹了掃微信小程序碼實(shí)現(xiàn)網(wǎng)站登陸實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
測(cè)試你的JS的掌握程度的代碼
先不講文章的主題是什么，大家先來做做這些題目，看你能做對(duì)多少。這也是反映了你對(duì)JS基礎(chǔ)知識(shí)的掌握程度！
2009-12-12
jquery $(document).ready()和window.onload的區(qū)別淺析
這篇文章主要介紹了jquery $(document).ready()和 window.onload的區(qū)別淺析,本文總結(jié)了執(zhí)行時(shí)間、編寫個(gè)數(shù)不同、簡(jiǎn)化寫法等不同的地方,需要的朋友可以參考下
2015-02-02
javascript axios 實(shí)現(xiàn)進(jìn)度監(jiān)控的示例代碼
在使用axios發(fā)送HTTP請(qǐng)求時(shí),可以通過onUploadProgress和onDownloadProgress來監(jiān)控上傳和下載的進(jìn)度,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-01-01
ajax接收后臺(tái)數(shù)據(jù)在html頁(yè)面顯示
本篇文章主要介紹了ajax接收后臺(tái)數(shù)據(jù)在html頁(yè)面顯示的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
基于cssSlidy.js插件實(shí)現(xiàn)響應(yīng)式手機(jī)圖片輪播效果
cssSlidy是一款支持手機(jī)移動(dòng)端的焦點(diǎn)圖輪播插件，支持標(biāo)題設(shè)置，滑動(dòng)動(dòng)畫，間隔時(shí)間等。這篇文章主要基于cssSlidy.js插件實(shí)現(xiàn)響應(yīng)式手機(jī)圖片輪播效果，
2016-08-08
JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
利用閑暇時(shí)間自己做了個(gè)JavaScript NodeTree，網(wǎng)上有很多類似的效果，本例主要是練練手，鞏固下知識(shí)，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)NodeTree導(dǎo)航欄有所幫助,認(rèn)為好的就分享嘍
2013-02-02
Three.js快速入門教程
這篇文章主要為大家詳細(xì)介紹了Three.js快速入門教程，幫助大家快速入門，感興趣的小伙伴們可以參考一下
2016-09-09
常用的JavaScript模板引擎介紹
這篇文章主要介紹了常用的JavaScript模板引擎介紹,本文介紹了8款常用JavaScript 模板引擎,著重講解了artTemplate模板引擎,需要的朋友可以參考下
2015-02-02