JS面向对象编程

Posted 2021-01-16 青春不迷也不彩

什么是面向对象编程（OOP）？用对象的思想去写代码，就是面向对象编程。

面向对象编程的特点

• 抽象：抓住核心问题
• 封装：只能通过对象来访问方法
• 继承：从已有对象上继承出新的对象
• 多态：多对象的不同形态

对象的组成

• 属性：对象下面的变量叫做对象的属性
• 方法：对象下面的函数叫做对象的方法

 

一、使用Object函数或对象字面量都编程

var obj1=new Object();//创建一个空的对象
        obj1.name=‘小明‘;  //属性
        obj1.showName=function(){   //方法
        alert(this.name);//this指向obj
 }
 obj1.showName();//小明

var obj2=new Object();//创建一个空的对象
        obj2.name=‘小灰‘;  //属性
        obj2.showName=function(){   //方法
        alert(this.name);//this指向obj
 }
 obj2.showName();//小灰

缺点：创建多个对象时，会产生大量的重复代码。

解决方法：工厂方式——面向对象中的封装函数

 

二、工厂方式——面向对象中的封装函数

//工厂方式 : 封装函数
function createPerson(name){
    var obj = new Object();
    obj.name = name;
    obj.showName = function(){
        alert( this.name );
    };

    return obj;    
}
var p1 = createPerson(‘小明‘);
p1.showName();
var p2 = createPerson(‘小强‘);
p2.showName();

缺点：创建对象都是使用Object的原生构造函数来实现的，因此无法识别对象类型

解决方法：构造函数模式——给一个对象添加方法

 

三 、构造函数模式——给一个对象添加方法

//new 后面调用的函数叫构造函数
　　function CreatePerson(name){
　　　　this.name=name;
　　　　this.showName=function(){
　　　　　　alert(this.name);
　　　　}
　　}
　　var p1=new CreatePerson(‘小明‘);//当new去调用一个函数时，函数中的this就是创建出来的对象而函数中的返回值就是this
　　 p1.showName();
　　var p2=new CreatePerson(‘小强‘);
　　p2.showName();
　　//缺点
　　console.log( p1.showName == p2.showName )//false 他们值不同，地址不同

使用自定义的构造函数，定义对象类型的属性和方法，与工厂方式的区别：

• 没有显式的创建对象
• 直接将属性和方法赋给this对象
• 没有return语句

缺点：就是在创建对象时，每个对象都有一套自己的方法，每定义一个函数都实例化了一个对象

解决方法：原型模式（prototype）——给一类对象添加方法

 

四、原型模式（prototype）——给一类对象添加方法

原型（prototype）：重写对象下面公用的属性或方法，让公用的属性或方法在内存中只存在一份（提高性能），也就是说所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

• 原型：类比css中的class
• 普通方法：类比css中的style

function CreatePerson(name){//普通方法
　　this.name=name;
}
CreatePerson.prototype.showName=function(){//原型
　　alert(this.name);
}
var p1=new CreatePerson(‘小明‘);
p1.showName();
var p2=new CreatePerson(‘小强‘);
p2.showName();
console.log( p1.showName== p2.showName);//true   

 

面向对象中this的问题

一般会出现问题的情况有两种：

• 定时器
• 事件

//定时器
function Aaa(){
          var _this=this;//将当前this值保存
            this.a=12;
          setInterval(function(){//定时器中this指向window
                _this.show();
           },1000);
}
Aaa.prototype.show=function(){
           alert(this.a);
 }
var obj=new Aaa();//12