JavaScript中几个重要的知识点 ---- 面向对象

JavaScript中几个最重要的大知识点

1. 面向对象

2. DOM事件

3. 异步交互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)();