Javascript面向对象(上)

发表于 | 更新于 | 分类于

什么是面向对象编程

  • 用对象的思想写代码，就是面向对象编程
  • 一直使用的对象数组Array和时间Date

面向对象编程特点（OOP）

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

对象的组成

  • 方法（行为、操作）
  • 属性

种类

  1. 工厂方式（封装函数）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function createPerson(){
        var obj=new Object() // 原料
        obj.name=name // 加工
        obj.showName=fucntion(){
            alert(this.name)
        }
        return obj // 出厂  
    }
    var p1=createPerson('小花').showName()
    var p2=createPerson('小林').showName()
    console.log(p1.showName==p2.showName) //false

  2. 构造函数

  • 当new去调用一个函数：这时候函数中当this就是创建出来当对象，而且函数的返回值直接就是this（隐式返回）

  • new后面的函数叫**构造函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    function CreatePerson(name){
        this.name=name
        this.showName=fucntion(){
            alert(this.name)
        }
    }
    var p1=new CreatePerson('小花').showName()
    p1.showName()
    var p2=new CreatePerson('小林').showName()
    p2.showName()
    console.log(p1.showName==p2.showName) //false

  • 构造函数之原型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function CreatePerson(){
      this.name=name
    }
    CreatePerson.prototype.showName=function(){
      alert(this.name)
    }
    var p1=new CreatePerson('小花').showName()
    var p2=new CreatePerson('小林').showName()
    console.log(p1.showName==p2.showName) //true

对象的引用

  • 对象类型：赋值不仅是值的复制，而且也是引用的传递

    1
    2
    3
    4
    5
    var a=[1,2,3]
    var b=a
    b.push(4)
    console.log(b) //[1,2,3,4]
    console.log(a) //[1,2,3,4]

  • 例外

    1
    2
    3
    4
    5
    var a=[1,2,3]
    var b=a
    b=[1,2,3,4]
    console.log(b) //[1,2,3,4]
    console.log(a) //[1,2,3]

  • 比较：对象类型值和引用都相同才为true

    例1 

    1
    2
    3
    var a=[1,2,3]
    var b=[1,2,3]
    console.log(a===b) // false

    例2 

    1
    2
    3
    var a=[1,2,3]
    var b=a
    console.log(a===b) // true

原型

  • 去改写对象下面公用的方法和属性，让公用的方法或者属性在内存中存一份（提高性能）
  • 原型中方法相当于css中的class，普通方法相当于css中的style

  • prototype 要写在构造函数的下面

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var arr=[1,2,3,4]
    Array.prototype.sum=function(){
        var result=0;
        for(var i=0;i<this.length;i++){
            result+=this[i]
        }
        return result 
    }
    console.log(arr.sum()) // 10

  • 优先级

    1
    2
    3
    4
    var arr=[];
    arr.number=10
    Array.prototype.number=20;
    console.log(arr.number) // 10 (style优先级高于class)

  • 写法以及使用

    1
    2
    3
    4
    5
    6
    function 构造函数(){
        this.属性
    }
    构造函数.prototype.方法=fucntion(){}
    var 对象1=new 构造函数()
    对象1.方法()