目錄
創建對象
字面量 創建對象
var obj ={
key:value
}
new Object() 創建對象
var obj1 = new Object()
獲取、設置對象屬性
obj.key 獲取/設置obj的key屬性的值value
obj1.key / obj1.key=value
obj[‘key’] 獲取/設置obj的key屬性的值value
obj['key'] / obj['key']=value
key in obj 判斷obj中是否有屬性key
key in obj
delete obj.key 刪除obj的key屬性
delete obj.key
批量創建對象方法
工廠模式
//優點 生成獨立的新對象
//缺點 代碼重複 沒有從屬性
function fun(value1, value2){
var obj ={
'key1':value1,
'key2':value2
}
return obj
}
var a = fun(實參1, 實參2)
//原型模式 函數的原型對象 prototype屬性
//優點 生成一個對象 沒有重複 有從屬
//缺點 可變的不可變
fun.prototype={
key1:value1,
key2:value2
}
構造函數
//首字母大寫
//優點 創建不同對象 有從屬關係
//缺點 代碼重複
function App(value1, value2){
this.key1=valve1,
this.key2=value2
}
var app = new App(實參1, 實參2)
構造+原型 組合模式
//不重複 可改變 有從屬
function App(value1, value2){ //可變
this.key1=valve1,
this.key2=value2
}
App.prototype={ //不可變
key3:function(){},
key4:value4
}
var app = new App(實參1, 實參2)
全局函數調用
function a(){ }
a() 或 window.a()
this指向
純粹函數中的this 指向window
對象中的函數的this 指向上層對象
事件中的this 指向事件觸發元素
構造函數中的this 指向實例化的對象
//改變this指向的方法
call(obj, 參數1, 參數2) //","隔開
apply(obj, [參數1, 參數2]) //"[]"包裹
bind(obj, 參數1, 參數2)() 或 bind(obj)(參數1, 參數2) //","隔開 參數寫在前/後"()"中 需要調用
原型
每一個普通函數都有一個prototype屬性,它指向函數的原型對象
原型對象有一個constructor屬性,指向它的構造函數
原型鏈
每一個obj中都有`__proto__`屬性,指向構造函數的原型對象,層層遞進,最終指向null,這樣形成的鏈式結構叫原型鏈
new操作符的實現
function fun(){
this.key = value;
}
fun.prototype.btn = function(){}
var obj = {} //定義一個新對象
`obj.__proto__` = fun.prototype //函數的原型對象賦到obj的原型鏈上
fun.call(obj) //改變this指向到obj
var ol = obj //返回新對象
面向過程
需要關注每一步
面向對象編程(oop)
以對象的方式實現某個功能
優點：不需要關注如何實現，只關注如何使用
//案例1
<body>
<div id="box"></div>
</body>
<script type="text/javascript">
function Box(){
this.div=document.createElement('div')
}
Box.prototype={
innerText:function(texts){
this.div.innerText=texts
return this
},
innerCss:function(obj){
for (var key in obj){
this.div.style[key]=obj[key]
}
return this
},
innerHtml:function(id){
var d = document.getElementById(id)
d.appendChild(this.div)
return this
}
}
var ass = new Box()
ass.innerText('aaa').innerCss({'background':'red'}).innerHtml('box')
</script>
面向對象
//特性：封裝、繼承、多態
原型鏈繼承
//子類.prototype = new 父類
//優點:繼承父類所有的方法和屬性
//缺點:無法給父類構造函數傳參
//父類
function Fu(value){
this.keys = value
}
Fu.prototype.fun=function(a){console.log(a)}
//子類
function Zi(){}
Zi.prototype=new Fu('value')
//實例化Zi()
var zi = new Zi()
console.log(zi)
構造函數繼承
//子類構造函數中 {父類.call(this)}
//優點：可以給父類構造函數傳參
//缺點：不能繼承父類的原型
//父類
function Fu(value1,value2){
this.keys1 = value1,
this.keys2 = value2
}
Fu.prototype.fun=function(a){console.log(a)}
//子類
function Zi(){Fu.call(this)}
//實例化Zi()
var zi = new Zi()
console.log(zi)
組合繼承
//優點：即可給父類傳參，也可繼承父類的原型
//父類
function Fu(value1,value2){
this.keys1 = value1,
this.keys2 = value2
}
Fu.prototype.fun=function(a){console.log(a)}
//子類
function Zi(n,m){Fu.call(this,n,m)}
Zi.prototype=new Fu('value1','value2')
//實例化Zi()
var zi = new Zi('value3','value4')
console.log(zi)
多態
//父類
function Fu(value1,value2){
this.keys1 = value1,
this.keys2 = value2
}
Fu.prototype.fun=function(a){console.log(a)}
//子類
function Zi(n,m,c){
Fu.call(this,n,m)
this.c=c
}
Zi.prototype=new Fu('value1','value2')
Zi.prototype.dd='qwe'
//實例化Zi()
var zi = new Zi('value3','value4','sdf')
console.log(zi)
閉包
//即 閉包函數 閉包變量
//可以訪問其他函數內部變量的函數
//即 定義在函數內部的函數
//---------------------------------------------------------
//方法一
function a(){
var x=1
//x 閉包變量 不會銷燬，可能造成內存泄漏
//b() 閉包函數
function b(){
console.log(x)
}
b()
}
a()
//-----------------------------------------------------
//方法二
function a(){
var x=1
//x 閉包變量 不會銷燬，可能造成內存泄漏
(function(){
console.log(x)
})()
}
a()
//-----------------------------------------------------
//方法三
function a(){
var x=1
//x 閉包變量 不會銷燬，可能造成內存泄漏
return function(){
console.log(x)
}
}
a()()