目錄
- 創建物件
- 字面量 創建物件
- new Object() 創建物件
- 獲取、設定物件屬性
- obj.key 獲取/設定obj的key屬性的值value
- obj['key'] 獲取/設定obj的key屬性的值value
- key in obj 判斷obj中是否有屬性key
- delete obj.key 洗掉obj的key屬性
- 批量創建物件方法
- 工廠模式
- 建構式
- 構造+原型 組合模式
- 全域函式呼叫
- this指向
- 原型
- 原型鏈
- new運算子的實作
- 面向程序
- 面向物件編程(oop)
- 面向物件
- 原型鏈繼承
- 建構式繼承
- 組合繼承
- 多型
- 閉包
創建物件
字面量 創建物件
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()()
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/236093.html
標籤：其他
上一篇：js中關于call的原始碼決議
下一篇：如何使用jq封裝tab切換