javascript物件基礎(使用物件)---物件、屬性、方法的基本操作
除字串、數字、true、false、null和undefined之外,javascript的值都是物件
一、物件的分類:
1. 原生物件:
Object、Function、Array、String、Boolean、Number、Date、RegExp、
Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URLError
2.宿主物件:非javascript定義的物件,是由javascript寄宿的環境定義
Window、Document、History、Location、Screen、Navigator、Body、Form、Event
二、物件的常見用法是:
建立create、設定set、查詢query、刪除delete、檢測test、列舉enumerate
物件的基本操作:建立物件 引用物件 銷燬物件
1、建立物件
1.1使用建構函式建立物件
var o=new Object(); //建立一個空物件(不包含任何屬性和方法的空物件)
var o=new Array(); //空的陣列物件(繼承陣列的屬性和方法)
var o=new MyClass();//自定義物件
1.2使用直接量建立物件
var o={};//建立的空物件直接量
var o={x:1,y:false,name:'zhang',add:'shenzhen'}//建立包含資料的物件直接量
2.引用物件:儲存在變數中的值只是引用物件的地址,而不是物件本身
o={x:1,y:true}
o1=o;
alert(delete o);//刪除變數o,返回true
alert(o1.x);//1,說明物件依然在
alert(o.x);//提示沒有定義物件
3.銷燬物件:javascript自動回收無用的儲存單元,物件沒有被任何變數引用,則處於廢除狀態,相當於o=null(對於不用的物件可習慣這樣寫成這樣,將物件廢棄節省空間)
var o={x:1,y:true}
o=null;//定義物件引用變數為null,即廢除物件
alert(o.x);//提示系統錯誤,找不到物件
屬性基本操作:定義屬性、訪問屬性、賦值和刪除屬性
1.定義屬性
1.1物件結構體內定義屬性: 3層巢狀物件結構(雖然包含不同屬性名y,但屬於不同的作用域,因此不會衝突)
var o={//一級物件
x:1,
y:{//二級物件
x:3,
y:{//三級物件
x:3,
y:false
}}}
1.2 物件結構體外定義屬性:
var o={};
o.x=1;
o.y={
x:2,
y:true
}
1.3建構函式定義屬性
var o=function(){
this.x=1;
this.y={
x:1,
y:true
}
}
2.訪問屬性:
alert(o.y.y.y)//若讀取 屬性不存在,不會拋異常,返回undefined
alert(o["y"]["y"]["y"])
for(var i in o){alert(o[i])}//使用陣列操作方式讀取屬性,屬性沒有固定顯示順序,同時也只能夠列舉自定義的屬性
3.賦值和刪除屬性
var o={x:1,y:2}
o.x=2;
o["y"]=1;
delete o.x;
4.物件的方法:本質是一種值為函式的屬性
4.1結構體內定義-
var o={x:function(){alert(this.y)}}//--this訪問當前物件的屬性y的值
o.x(); //undefined
var f=o;
f.y=2; f.x();//2
4.2結構體外定義-
var o={} o.x=function(a){return 10*a;}
var f=o.x(5);alert(f);//50
4.3構造方法
4.3.1
function who(){alert(this.name)}//定義一個抽象方法
var o=new Object();
o.name="o";
o.who=who;//繫結抽象方法
var f=new Object();
f.name="f";
f.who=who;//繫結抽象方法
o.who();//"o"
f.who();//"f"
4.3.2
function f(){return this.x+this.y}
function MyClass(x,y){this.x=x;this.y=y;this.add=f}
var o=new MyClass(10,20);
alert(o.add())//30
三、物件的高階用法(ECMScript5):Object Array Function String
Object ------
1. 建立物件(前面使用的是1.使用物件直接量2.通過new建立物件)
Object.create(prototype,descriptors) //prototype為必需引數,要用作原型的物件,可以為null;第二個可選,屬性描述項物件 ,即descriptors是個javascript物件{}
//資料屬性描述符包含value特性:writable enumerable configurable,若未指定 都預設為false
//訪問器屬性描述符:設定屬性值的函式set 返回屬性值的函式get
1.1 var newObj.create(null,{
size:{
value:'large',
enumerable:true
},
shape:{
value:"round",
enmumerable:true
}
})
newObj.size;//large newObj.shape;//round
Object.getPrototypeOf(newObj);//null
1.2使用Object.create建立一個與Object物件具有相同物件的原型物件
var first={x:undefined,y:undefined}//定義的物件直接量
var second=Object.create(Object.prototype,{
x:{
value:undefined,
writable:true,
configurable:true,
enumerable:true
},
y:{
value:undefined,
writable:true,
configurable:true,
enumerable:true
},
})
Object.getPrototypeOf(first);//[object Object]
Object.getPrototypeOf(second);//[object Object]
2.1定義屬性:2個靜態函式 Object.defineProperty()、Object.defineProperties()
Object.defineProperty(object,propertyname,desciptor)//將屬性新增到物件,或者修改現有屬性的特性
Object.defineProperties(object,desciptors)//將多個屬性新增到物件,或者修改現有多個屬性的特性
例:
var obj={}
Object.defineProperty(obj,"newDataProperty",{
value:101,
writable:true,
enumerable:true,
configurable:true
});
obj.newDataProperty=102;//將newDataProperty的值101修改為102
document.write(obj.newDataProperty);//102
var obj={}
Object.defineProperties(obj,{
newDataProperty:{
value:101,
writable:true,
enumerable:true,
configurable:true},
newAccessorProperty:{
set:function(x){this.newaccpropvalue=x},
get:function(){retrun this.newaccpropvalue}
}
});
obj.newAccessorProperty=10;
document.write(obj.newAccessorProperty);//10
22.訪問屬性(前面使用的是1 .方式 2 陣列方式 3 for in)
Object.getPrototypeOf(object);//返回指定物件object的原型
Object.getOwnPropertyDesciptor(object,propertyname);//獲取指定物件object的私有屬性描述符
Object.getOwnPropertyNames(object);返回指定物件object私有屬性的名稱,包括可列舉和不可列舉的屬性和方法的名稱
Object.keys(object);返回僅可列舉的的屬性和方法的名稱,object也可以是建立的物件或現有的dom物件
例:
1.--- function Pasta(grain,width){
this.grain=grain;
this.width=width;
}
var spaghetti=new Pasta("wheat",0.2); var proto= Object.getPrototypeOf(spaghetti)
docuement.write(proto===Pasta.prototype);//true
2-- function Pasta(grain,width,shape){
this.grain=grain;
this.width=width;
this.toString=function(){
return(this.grain+","+this.width+","+this.shape)
}
}
var spaghetti=new Pasta("wheat",0.2,"circle");
var arr= Object.getOwnPropertyNames(spaghetti);
docuement.write(arr);//grain,width,shape,toString
3--var obj={}
obj.newDataProperty="abc",
var descriptor=Object.getOwnPropertyDescriptor(obj,"newdataProperty");//獲得物件私有屬性的描述符
descriptor.writable=false;//修改特性
Object.defineProperty(obj,"newdataProperty",descriptor);//定義屬性
var desc2=Object.getOwnPropertyDescriptor(obj,"newdataProperty");//獲得物件私有屬性的描述符
for(var prop in des2){
document.write(prop+':'+desc2[prop]);
document.write("<br/>");
}//value:abc writable:false enumerable:true configruable:ture
2.2配置屬性的特性
Object.seal(object);//阻止修改現有屬性的特性,以及新增新屬性,但可以修改屬性的值
Object.freeze(object);//阻止修改現有屬性的特性和值,以及新增新屬性
Object.preventExtensions(object);//阻止新增新屬性,但修改屬性的特性和值
2.3檢測屬性的特性
Object.isSealed(object);//如果無法再物件中修改現有屬性的特性,且無法向物件新增新屬性,則 返回true
Object.isFrozen(object);//如果無法再物件中修改現有屬性的特性和值,且無法向物件新增新屬性,則 返回true
Object.isExtensible(object);//如果可擴充套件(即可新增新屬性),則為true,否則返回false
Array---ECMAScropt5新增了9個方法
定位:2個--array.indexOf() 、 array.lastIndexOf()
array.indexOf(searchElement[,fromIndex]);//陣列中第一個匹配項的索引,沒找到指定值,返回-1
array.lastIndexOf(searchElement[,fromIndex]);//陣列中最後一個匹配項的索引,沒找到指定值,返回-1
迭代:5個---forEach()、every()、some()、map()、filter()
1. array.forEach(callbackfn[,thisArg])
例1.1: function callback(value,index,arr){
document.write("value:"+value);
document.write("index:"+index);
document.write("arr:"+arr);
}
var arrs=['a','b','c'];
arrs.forEach(callback)
例1.2forEach()如何使用thisArg引數,該引數指定可對其引用this關鍵字的物件
var obj={
showResults:funciton(value,index){
var squared=this.calcSquare(value);
document.write("value:"+value);
document.write("index:"+index);
document.write("squared:"+squared);
document.write("<br/>")
},
calcSquare:function(x){return x*x}
};
var numbers=[5,6];
numbers.forEach(obj.showResults,obj);
numbers.forEach(function(value,index){this.showResults(value,index)},obj)
---every()
function CheckIfEven(value,index,ar){
document.write(value+" ");
if(value%2==0){return true}else{return false}
}
var nums=[2,4,5,6,8];
if(nums.every(CheckIfEven)){document.write(" 都是偶數");}else{document.write(" 不全為偶數");}//2 4 5不全為偶數
every() thisArg的用法:
var checkNumericRange=function(vaule){
if (typeof value!=='number')
return false
esle
return value>=this.minimum&&value<=this.maximum;
}
var nums=[10,15,19];
var obj={minimum:10,maximum:20}
if (nums.every(checkNumericRange,obj))
document.write("都在指定範圍內")
else
.write("部分在指定範圍內")
-----some()
function CheckIfEven(value,index,ar){
if(value%2==0){return true}
}
var nums=[1,15,4,10,11,22];
var evens=nums.some(CheckIfEven);
if(evens)
document.write("不全是奇數。")
else
document.write("全是奇數。")
彙總:2個 reduce() reduceRight()
array.reduce(callbackfn[,initialValue])
function callbackfn(previousValue,currentValue,currentIndex,array)//4個引數
Function
function.bind(thisArg[,arg1[,arg2[,argN]]])
String
stringObj.trim()