目录
创建对象
字面量 创建对象
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()()
来源：oschina
链接：https://my.oschina.net/u/4273344/blog/4815288