初步了解javascript面向?qū)ο?/h1>

 更新時(shí)間：2015年11月09日 09:53:24   投稿：mrr  

面向?qū)ο蟮恼Z(yǔ)言有一個(gè)標(biāo)志，即擁有類(lèi)的概念，抽象實(shí)例對(duì)象的公共屬性與方法，基于類(lèi)可以創(chuàng)建任意多個(gè)實(shí)例對(duì)象，一般具有封裝、繼承、多態(tài)的特性！但JS中對(duì)象與純面向?qū)ο笳Z(yǔ)言中的對(duì)象是不同的，ECMA標(biāo)準(zhǔn)定義JS中對(duì)象：無(wú)序?qū)傩缘募?，其屬性可以包含基本值、?duì)象或函數(shù)

前言

基于類(lèi)的對(duì)象：我們都知道面向?qū)ο蟮恼Z(yǔ)言中有一個(gè)明顯的標(biāo)志，就是都有類(lèi)的概念，通過(guò)類(lèi)這個(gè)類(lèi)似模板的東西我們可以創(chuàng)建許多個(gè)具有相同的屬性和方法的對(duì)象。然而在ECMAScript中并沒(méi)有類(lèi)的概念，自然它與基于類(lèi)的語(yǔ)言中的對(duì)象也會(huì)有所不同。

js中的對(duì)象： 無(wú)序 的屬性的集合，屬性可以包含基本值、對(duì)象、函數(shù)。即js中的對(duì)象是一組沒(méi)有特定順序的值，對(duì)象的每個(gè)屬性或者方法都有一個(gè)自己的名字，而每個(gè)名字都與一個(gè)值相對(duì)應(yīng)。

理解對(duì)象

創(chuàng)建對(duì)象的方式

1 創(chuàng)建一個(gè)對(duì)象的最簡(jiǎn)單的方式是創(chuàng)建一個(gè)Object實(shí)例,之后為其添加屬性和方法。

例如

  var person = new Object();
    person.name='謙龍';
    person.sex='男';
    person.sayNameAndSex=function(){
      console.log(this.name,this.sex)
    }
    person.sayNameAndSex(); // 謙龍 男

2 使用對(duì)象字面量形式

例如

  var person={
    name:'謙龍',
    sex:'男',
    sayNameAndSex:function(){
      console.log(this.name,this.sex)
    }
  }
   person.sayNameAndSex(); // 謙龍 男

屬性的類(lèi)型

ECMAScript有兩種數(shù)據(jù)屬性：數(shù)據(jù)屬性和訪問(wèn)器屬性。

數(shù)據(jù)屬性

數(shù)據(jù)屬性包含一個(gè)數(shù)據(jù)值的位置。在這個(gè)位置可以讀取和寫(xiě)入值。共有四個(gè)描述其行為的特性。

1.[[Configurable]]:表示能否通過(guò)delete刪除屬性從而重新定義屬性...默認(rèn)值為true

2.[[Enumerable]]:表示能否通過(guò)for in 循環(huán)返回屬性...默認(rèn)為true

3.[[Writable]]:表示能否修改屬性的值...默認(rèn)為true

4.[[Value]]:表示這個(gè)屬性的值.默認(rèn)為undefined

要修改屬性默認(rèn)的特性，必須使用ES5的Object.defineProperty()方法，而該方法接收三個(gè)參數(shù)：屬性所在的對(duì)象、屬性的名稱(chēng)、還有一個(gè)描述屬性特性的對(duì)象(configurable、enumerable、writable、value)，設(shè)置其中的一個(gè)或者多個(gè)值可以修改對(duì)應(yīng)的特性

DEMO

var person={};
Object.defineProperty(person,'name',{
 configurable:false,//表示不允許通過(guò)delete刪除屬性
 writable:false,//表示不允許重寫(xiě)
 ennumerable:false,//表示不允許通過(guò)for in遍歷
 value:'謙龍'//設(shè)置該對(duì)象中屬性的值
})
person.name='謙龍2';//嘗試重新設(shè)置 結(jié)果不生效
delete person.name;//嘗試刪除 結(jié)果不生效
for(var attr in person){
 console.log(person[attr]);// false
}
console.log(person.name);//謙龍

注意：將 configurable 設(shè)置為false后 不允許再次修改為true，另外在調(diào)用Object.defineProperty()方法的時(shí)候，configurable、ennumerable、writable默認(rèn)值為false。

訪問(wèn)器屬性

訪問(wèn)器屬性不包含數(shù)據(jù)值，它們包含一對(duì)getter、setter函數(shù)(但是這兩個(gè)函數(shù)并不是必須的)在讀取訪問(wèn)器屬性的時(shí)候，會(huì)調(diào)用getter函數(shù)，這個(gè)函數(shù)是負(fù)責(zé)返回有效的值，在寫(xiě)入訪問(wèn)器屬性的時(shí)候會(huì)調(diào)用setter函數(shù)并傳入新值，這個(gè)函數(shù)負(fù)責(zé)如何處理數(shù)據(jù)。

訪問(wèn)器屬性具有如下的特性

[[configurable]] 表示能否通過(guò)delete來(lái)刪除屬性從而定義新的屬性

[[enumerable]] 表示能否通過(guò)for in循環(huán)來(lái)遍歷返回屬性

[[get]] 在讀取屬性時(shí)候調(diào)用的函數(shù)，默認(rèn)為undefined

[[set]] 在寫(xiě)入函數(shù)的時(shí)候調(diào)用的函數(shù)，默認(rèn)的值為undefined

注意：訪問(wèn)器屬性不能直接定義，必須通過(guò)Object.defineProterty()定義

DEMO

 var book={
 _year:2015, //這里的下劃線是常見(jiàn)的記號(hào)，表示只能通過(guò)對(duì)象的方法才能訪問(wèn)的屬性
 edition:1
}
Object.defineProperty(book,'year',{
 get:function(){
  return this._year; //即默認(rèn)通過(guò) book.year獲取值的時(shí)候 返回的是 boot._year的值
 },
 set: function (value) {//在對(duì) boot.year設(shè)置值的時(shí)候 默認(rèn)調(diào)用的方法 對(duì)數(shù)據(jù)進(jìn)行處理
  var _year=this._year;
  if(value > _year){
   this._year=value;
   this.edition+=value-_year;
  }
 }
})
book.year = 2016;
console.log(book.year,book.edition); // 2016 2

定義多個(gè)屬性

我們可以通過(guò)ES5中的Object.defineProperties()方法來(lái)給對(duì)象添加多個(gè)屬性，該方法接受兩個(gè) 對(duì)象 參數(shù),第一個(gè)參數(shù)是要添加和修改其屬性的對(duì)象，第二個(gè)對(duì)象的屬性和第一個(gè)對(duì)象中要添加和修改的屬性一一對(duì)應(yīng)。

DEMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true //注意這里設(shè)置成true 才可以 "寫(xiě)" 默認(rèn)是false 
 },
 edition:{
  value:1,
  writable:true //注意這里設(shè)置成true 才可以 "寫(xiě)" 默認(rèn)是false
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
book.year=2016;
console.log(book.year,book.edition); // 2016 2

讀取對(duì)象屬性的特性

使用ES5中的Object.getOwnPropertyDescriptor()方法，可以去的給定的屬性的描述符。

該方法接收兩個(gè)參數(shù)：屬性所在的對(duì)象和要讀取描述符的屬性名稱(chēng)。返回的是一個(gè)對(duì)象，如果是數(shù)據(jù)屬性，則返回的屬性有 configurable,enumerable,writable,value.如果是訪問(wèn)器屬性則返回的屬性有 configurable,enumerable,get,set

DEMO

var book={};
Object.defineProperties(book,{
 _year:{
  value:2015,
  writable:true
 },
 edition:{
  value:1,
  writable:true
 },
 year:{
  get:function(){
   return this._year;
  },
  set: function (value) {
   var _year=this._year;
   if(value > _year){
    this._year=value;
    this.edition+=value-_year;
   }
  }
 }
})
//對(duì)象遍歷函數(shù)
function showAllProperties(obj){
 for(var attr in obj){
  console.log(attr+':'+obj[attr]);
 }
}
var descriptor= Object.getOwnPropertyDescriptor(book,'_year');//數(shù)據(jù)屬性
var descriptor2= Object.getOwnPropertyDescriptor(book,'year');//訪問(wèn)器屬性
showAllProperties(descriptor);
console.log('============================');
showAllProperties(descriptor2);

以上關(guān)于初步了解javascript面向?qū)ο蟮娜績(jī)?nèi)容就介紹到這里，下面將給大家介紹深入淺析js面向?qū)ο笾斀獬Ｒ?jiàn)創(chuàng)建對(duì)象的幾種方式，感興趣的朋友繼續(xù)關(guān)注哦。

您可能感興趣的文章:

• js實(shí)現(xiàn)對(duì)ajax請(qǐng)求面向?qū)ο蟮姆庋b
• 詳解JavaScript基于面向?qū)ο笾^承實(shí)例
• 詳解JavaScript基于面向?qū)ο笾^承
• 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象（2）
• 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對(duì)象（1）
• Javascript簡(jiǎn)單實(shí)現(xiàn)面向?qū)ο缶幊汤^承實(shí)例代碼
• 每天一篇javascript學(xué)習(xí)小結(jié)（面向?qū)ο缶幊蹋?/a>
• js面向?qū)ο笾Ｒ?jiàn)創(chuàng)建對(duì)象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
• JavaScript的面向?qū)ο缶幊袒A(chǔ)
• 簡(jiǎn)單分析javascript面向?qū)ο笈c原型
• JavaScript面向?qū)ο笾接徐o態(tài)變量實(shí)例分析

• js
• 面向?qū)ο?/a>

相關(guān)文章

• 

  javascript父子通信

  javascript父子通信...

  2007-05-05
• 

  小程序自定義圓形進(jìn)度條

  這篇文章主要為大家詳細(xì)介紹了小程序自定義圓形進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2020-11-11
• 

  IFrame跨域高度自適應(yīng)實(shí)現(xiàn)代碼

  最近在做項(xiàng)目中，遇到一個(gè)問(wèn)題，就是iframe高度的自適應(yīng)問(wèn)題，以下是解決辦法

  2012-08-08
• 

  下載站控制介紹字?jǐn)?shù)顯示的腳本 顯示全部 隱藏介紹等功能

  有一些下載網(wǎng)站為了整體的統(tǒng)一，盡量的控制軟件介紹的字?jǐn)?shù)顯示，要不因?yàn)樽謹(jǐn)?shù)介紹太多導(dǎo)致用戶看到下載鏈接比較靠后等原因而一個(gè)小功能的實(shí)現(xiàn)。

  2009-09-09
• 

  js實(shí)現(xiàn)圖片輪播效果

  這篇文章主要介紹了js實(shí)現(xiàn)圖片輪播效果的相關(guān)資料,需要的朋友可以參考下

  2015-12-12
• 

  JavaScript對(duì)象訪問(wèn)器Getter及Setter原理解析

  這篇文章主要介紹了JavaScript對(duì)象訪問(wèn)器Getter及Setter原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

  2020-12-12
• 

  用javascript實(shí)現(xiàn)始終保持打開(kāi)同一個(gè)子窗口以及關(guān)閉父窗口同時(shí)自動(dòng)關(guān)閉所有子窗口

  用javascript實(shí)現(xiàn)始終保持打開(kāi)同一個(gè)子窗口以及關(guān)閉父窗口同時(shí)自動(dòng)關(guān)閉所有子窗口...

  2007-06-06
• 

  JavaWeb表單及時(shí)驗(yàn)證功能在輸入后立即驗(yàn)證(含用戶類(lèi)型,性別,愛(ài)好...的驗(yàn)證)

  最近做項(xiàng)目遇到表單在輸入后立即驗(yàn)證，而不是提交后再驗(yàn)證，在網(wǎng)上找了下資料，沒(méi)有合適的，于是我自己動(dòng)手寫(xiě)了一個(gè)，分享到腳本之家平臺(tái)，供大家參考

  2017-06-06
• 

  ASP 過(guò)濾數(shù)組重復(fù)數(shù)據(jù)函數(shù)(加強(qiáng)版)

  asp 不重復(fù)數(shù)組數(shù)據(jù)的實(shí)現(xiàn)代碼，比上個(gè)版本，更細(xì)，更能更強(qiáng)，大家可以根據(jù)需要選擇。

  2010-05-05
• 

  JavaScript中遍歷對(duì)象的property的3種方法介紹

  這篇文章主要介紹了JavaScript中遍歷對(duì)象的property的3種方法介紹,本文先是講解了3種方法并用一張圖片加深理解,然后給出代碼實(shí)例,需要的朋友可以參考下

  2014-12-12

最新評(píng)論