ES5擴充套件屬性
一:Object擴充套件屬性
1. Object.create(prototype, [descriptors])
* 作用: 以指定物件為原型建立新的物件
* 為新的物件指定新的屬性, 並對屬性進行描述
value : 指定值
writable : 標識當前屬性值是否是可修改的, 預設為false
configurable: 標識當前屬性是否可以被刪除 預設為false
enumerable: 標識當前屬性是否能用for in 列舉 預設為false
2. Object.defineProperties(object, descriptors)
* 作用: 為指定物件定義擴充套件多個屬性
* get :用來獲取當前屬性值得回撥函式
* set :修改當前屬性值得觸發的回撥函式,並且實參即為修改後的值
* 存取器屬性:setter,getter一個用來存值,一個用來取值。
var obj = {name : 'curry', age : 29} var obj1 = {}; obj1 = Object.create(obj, { sex : { value : '男',//設定數值 writable : true //許可權能否修改 } }); obj1.sex = '女'; console.log(obj1.sex); //Object.defineProperties(object, descriptors) var obj2 = { firstName : 'curry', lastName : 'stephen' }; Object.defineProperties(obj2, { fullName : { get : function () { return this.firstName + '-' + this.lastName }, set : function (data) { var names = data.split('-'); this.firstName = names[0]; this.lastName = names[1]; } } }); console.log(obj2.fullName);//獲取擴充套件的屬性自動呼叫get方法 obj2.firstName = 'tim'; obj2.lastName = 'duncan'; console.log(obj2.fullName); obj2.fullName = 'kobe-bryant';//更改屬性自動呼叫set方法 console.log(obj2.fullName);
物件本身的兩個方法
* get propertyName(){} 用來得到當前屬性值的回撥函式
* set propertyName(){} 用來監視當前屬性值變化的回撥函式
<script type='text/javascript'> var obj = { firstName : 'kobe', lastName : 'bryant', get fullName(){ return this.firstName + ' ' + this.lastName }, set fullName(data){ var names = data.split(' '); this.firstName = names[0]; this.lastName = names[1]; } }; console.log(obj.fullName); obj.fullName = 'curry stephen'; console.log(obj.fullName); </script>
二:陣列的擴充套件屬性
1. Array.prototype.indexOf(value) : 得到值在陣列中的第一個下標
2. Array.prototype.lastIndexOf(value) : 得到值在陣列中的最後一個下標
3. Array.prototype.forEach(function(item, index){}) : 遍歷陣列
4. Array.prototype.map(function(item, index){}) : 遍歷陣列返回一個新的陣列,返回加工之後的值
5. Array.prototype.filter(function(item, index){}) : 遍歷過濾出一個新的子陣列, 返回條件為true的值
var arr = [1, 4, 6, 2, 5, 6]; console.log(arr.indexOf(6));//2 //Array.prototype.lastIndexOf(value) : 得到值在陣列中的最後一個下標 console.log(arr.lastIndexOf(6));//5 //Array.prototype.forEach(function(item, index){}) : 遍歷陣列 arr.forEach(function (item, index) { console.log(item, index); }); //Array.prototype.map(function(item, index){}) : 遍歷陣列返回一個新的陣列,返回加工之後的值 var arr1 = arr.map(function (item, index) { return item + 10 }); console.log(arr, arr1); //Array.prototype.filter(function(item, index){}) : 遍歷過濾出一個新的子陣列, 返回條件為true的值 var arr2 = arr.filter(function (item, index) { return item > 4 }); console.log(arr, arr2);
三:函式this
1. Function.prototype.bind(obj) :
* 作用: 將函式內的this繫結為obj, 並將函式返回
2. 面試題: 區別bind()與call()和apply()?
* 都能指定函式中的this
* call()/apply()是立即呼叫函式
* bind()是將函式返回
<script type="text/javascript"> function fun(age) { this.name = 'kobe'; this.age = age; console.log(this.age); } var obj = {}; fun.apply(obj,[20]); fun.call(obj,30); fun.bind(obj,40)(); </script>