JavaScript中几个最重要的大知识点
面向对象
DOM事件
异步交互ajax
面向对象
在JS中可以把任意的引用和变量都看成是一个对象。面向对象的主要三个表现形式:
封装
继承
多态
1. 封装
1.1 单例模式
var obj={name: "sam",age: 12,method: function(){var objName=this.name;return objName;},ale: function(){var that=this;function sum(num1,num2){this.num=that.age;return num1+this.num+num2;}console.log(sum(1,2));}
}
单例模式有不污染全局变量和节约window栈内存的优点
var main={init:function(){this.changeName();},changeName:function(){var that=this;var oBody=document.body;oBody.onclick=function(){that.changeValue();}},changeValue:function(){document.getElementById("one").value="sam";}
}main.init();
1.2 工厂模式
能够快速地根据不同需求,传入不同参数,来返回不同的对象,缺点是不能判断对象的类型
function self(name,age,sex){var person={};person.name=name;person.age=age;person.sex=sex;if(sex=="man"){person.job="coder";}if(sex=="woman"){person.job="beatiful";}return person;
}
var mine=self("sam",22,"man");
console.log(mine.job);
1.3 构造函数模式
构造函数模式能够解决工厂模式不能判断对象类型的缺点,构造函数模式能够自定义类,构造具有相同属性和方法的实例
function Person(){this.eat="food";this.sleep="night";this.say=function(){console.log("I am person,I can speak");}
}
var person1=new Person();
person1.say();
call()和apply()方法
call()方法:
让调用对象执行,然后第一参数是谁,调用对象的this就改变指向是谁,后边跟参数,依次对应传入apply()方法:
让调用对象执行,然后第一参数是谁,调用对象的this就改变指向是谁,后边跟参数,以数组的形式传入
2.继承
2.1 原型继承
把被继承者的构造函数赋值给继承者的prototype,注意需要给继承者的prototype手动添加constructor属性
function A(){this.name="A";this.sayHi=function(){console.log("Hi!I am A");}
}function B(){this.name="B";this.age=22;this.sayHi=function(){console.log("Hi,I am B");}
}
B.prototype.work=function(){console.log("I can play");
}A.prototype=new B();
A.prototype.constructor=A;
var a=new A();
console.log(a);
2.2 call / apply 继承
把被继承者设置的私有属性,克隆一份作为继承者私有的
function A(){this.name="A";this.age=22;this.sayName=function(){console.log("I am A");}
}function B(){A.call(this);
}var b=new B();
console.log(b);
2.3 冒充对象继承
继承者继承了被继承者私有和公有的属性和方法
function A(){this.x=100;
}
A.prototype.getX=function(){console.log(this.x);
}function B(){var temp=new A();for(var key in temp){this[key]=temp[key];}
}var b=new B();
console.log(b);
3. 多态
javascript中没有严格的多态,因为JS中没有重载,相同名字的函数不能同时存在,后定义的重名函数会覆盖先定义的函数(即使两个形参不相同)。我们可以写一个通用方法来模拟面向对象语言的多态
function simPoly(){if(arguments.length==1){return function(){console.log(1);}}if(arguments.length==2){return function(){console.log(2);}}
}simPoly(1,2)();