## 前言
也許你已經認為對對象的基本認識了,但還是跟小編一起過一遍js對象的基本知識吧。
## 對象
### 基本分類
* 內置對象:語法內定義的對象或者類,例如數組、函數、日期和正則表達式等
* 宿主對象:js解釋器所嵌入的宿主環境
* 自定義對象:解釋器運行中創建的對象
## 對象的創建
* 對象直接量 :賦值方式
var empty={};
var o={a:32,b:45}
* new 關鍵字創建 :var obj= new Person();
* 通過`Object.creat()`;
### 對象深拷貝
* 與淺拷貝的區別是,對象的屬性是非基礎類型數據也是可以的
~~~
if (typeof Object.assign != 'function') {
Object.assign = function(target) {
'use strict';
if (target == null) {
throw new TypeError('Cannot convert undefined or null to object');
}
target = Object(target);
for (var index = 1; index < arguments.length; index++) {
var source = arguments[index];
if (source != null) {
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
}
return target;
};
}
~~~
[深拷貝參考文檔](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign )
### 對象屬性
#### 屬性分類
* 屬性:自有屬性和繼承屬性
* 自有屬性:直接在對象中定義的屬性
* 繼承屬性:對象的原型對象中定義的屬性。
#### 屬性操作
* 查詢屬性
1 可以通過. 或者[] 修改,中括號的時候名稱需要加引號
2 賦值直接通過= 賦值即可。
* 刪除屬性
delete this.prop
* 檢測屬性
1.檢測所有的屬性 prop in obj (包括私有屬性以及繼承屬性)
2.檢測私有屬性 hasOwnProperty("x")
* 遍歷屬性
~~~
//for in 短循環遍歷屬性
for(var p in obj){
console.log(p+":"+obj[p])
}
~~~
## 對象方法
## 對象復制,繼承等
## es6拓展
* 對象的結構賦值
對象的賦值與數組的賦值區別最大就是,數組是按照次序賦值的,而對象是按照鍵值對賦值的,無序的。也就是說,變量名必須與屬性同名才可以。
~~~
var x;//已經申明過的變量,避免解釋x為代碼塊,不在首行
({x})={x:1};====({x}={x:1});//正確寫法
//其他舉例
var {foo,far}={foo:"aaa",far:"aaa"};//可以分別得到foo ,far的賦值
var {va}={foo:"aaa",far:"aaa"};//va undefined
var {foo:va}={foo:"aaa",far:"aaa"};//va =aaa 變量名與屬性名不一樣的時候
var p={
o:[
"hello",{y:"world"}]
}
var {o:[x,{y}]}=p; //對象也可以用來解析嵌套 結構
~~~
* is() 判斷兩個值是否相等,與===區別就是+0!=-0,nan=nan.
* assign 將對象的可枚舉屬性復制到目標對象,至少需要兩個對象作為參數。第一個是目標對象,第二個是參數對象,當為多個對象時,也會分別復制過來。特別注意的是:當屬性名相同的時候,屬性值會被覆蓋。
~~~
var target={a:3};
var source1={a:1};
var source2={b:3};
Object.assign(target,source1,source2);
~~~
* _proto_屬性,用來讀取或者設置對象的prototype對象。相關的有setPrototypeOf,getPrototypeOf()
* 增強的對象寫法
增強之后允許直接寫入變量和函數,書寫更加簡潔
var person={
birth,//birth:birth
hello(){}//hello=fn();
}
* 屬性名表達式
允許對象的屬性是變量or表達式,但要求其在中括號內
~~~
var lastword="last world";
var a={
firstword:"first world",
[lastword] : 'last dew d',
[lastword+'dv'] : 'last dew d'
}
~~~
* Symbol 新增的原始數據類型,不可以通過new創建。可以隨機生成不重復變量,獲取為.name,也可以通過指定name實現。
目前得不到name
~~~
let q1=Symbol();
let q2=Symbol();
let q3=Symbol();
~~~
* proxy 對象創建使用之前的攔截
~~~
var person ={
name:12
}
var proxy=new Proxy(person,{
get:function(target,property){
if(property in tearget){
return target[property];
}else{
throw new ReferenceError("not exist");
}
}
})
person.age// 拋出錯誤
pserson.name//12
~~~
* 對象的監聽 observe unobserve ,暫不支持
~~~
function observer(change){
console.log(change.name+change.oldValue+change.object(change.name)+change.type);
}
var o={};
Object.observe(o,observer);//
~~~
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi