目录

创建对象

字面量 创建对象

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

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')

面向对象

//特性：封装、继承、多态

原型链继承

//子类.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()()