zoukankan      html  css  js  c++  java
  • js 面向对象 定义对象

    js面向对象看了很多,却没有完全真正的理解,总是停留在一定的阶段,这次再认真看一下。

    面向对象包含两种:定义类或对象;继承机制;都是通过工厂模式,构造函数,原型链,混合方法这四个阶段,原理也一样,只是实现细节有点不同

    定义类或对象教程:http://www.w3school.com.cn/js/pro_js_object_defining.asp

    思路:工厂模式--构造函数--原型链--混合方式,注意每个阶段的具体写法和不足

    工厂模式(四个阶段):原始--工厂--传参--共享方法;方法名小写;不用new执行;

    原始:

    var oCar = new Object;
    oCar.color = "blue";
    oCar.doors = 4;
    oCar.mpg = 25;
    oCar.showColor = function() {
      alert(this.color);
    };
    

    缺点:如果创建多个对象,就要写很多遍相同的代码

    工厂:把通用的代码放在一个函数中;函数内,创建一个对象,return一个对象

    function createCar() {
      var oTempCar = new Object;
      oTempCar.color = "blue";
      oTempCar.doors = 4;
      oTempCar.mpg = 25;
      oTempCar.showColor = function() {
        alert(this.color);
      };
      return oTempCar;
    }
    
    var oCar1 = createCar();
    var oCar2 = createCar();
    

    缺点:生成的对象,属性方法完全一样

    传参:给属性传递不同的参数;生成的对象,有相同的属性名,不同的属性值;

    function createCar(sColor,iDoors,iMpg) {
      var oTempCar = new Object;
      oTempCar.color = sColor;
      oTempCar.doors = iDoors;
      oTempCar.mpg = iMpg;
      oTempCar.showColor = function() {
        alert(this.color);
      };
      return oTempCar;
    }
    
    var oCar1 = createCar("red",4,23);
    var oCar2 = createCar("blue",3,25);
    
    oCar1.showColor();		//输出 "red"
    oCar2.showColor();		//输出 "blue"
    

    缺点:生成的对象,有各自的方法,浪费内容

    共享方法:在工厂函数外定义自己的方法,再通过属性指向

    function showColor() {
      alert(this.color);
    }
    
    function createCar(sColor,iDoors,iMpg) {
      var oTempCar = new Object;
      oTempCar.color = sColor;
      oTempCar.doors = iDoors;
      oTempCar.mpg = iMpg;
      oTempCar.showColor = showColor;
      return oTempCar;
    }
    
    var oCar1 = createCar("red",4,23);
    var oCar2 = createCar("blue",3,25);
    
    oCar1.showColor();		//输出 "red"
    oCar2.showColor();		//输出 "blue"
    

    缺点:语义上看不像对象的方法  

    构造函数:工厂模式的四个阶段,可以通过构造函数共同解决;方法名首字母大写;没有创建对象,使用this;new执行;没有return;

    function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.showColor = function() {
        alert(this.color);
      };
    }
    
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);
    

    共享方法的问题,跟工厂模式的一样。

    原型链:用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性

    function Car() {
    }
    
    Car.prototype.color = "blue";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 25;
    Car.prototype.drivers = new Array("Mike","John");
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car();
    var oCar2 = new Car();
    
    oCar1.drivers.push("Bill");
    
    alert(oCar1.drivers);	//输出 "Mike,John,Bill"
    alert(oCar2.drivers);	//输出 "Mike,John,Bill"
    

    缺点:

    1、构造函数没有参数,这个问题,可能原型链就是这样定义的吧。

    2、如果属性(driver)指向对象,多个实例对指向同一个对象,出现问题。

    目的:属性不能共享(如果需要共享的话,写在prototype上),方法需要共享;  

      

    混合方式:

    function Car(sColor,iDoors,iMpg) {
      this.color = sColor;
      this.doors = iDoors;
      this.mpg = iMpg;
      this.drivers = new Array("Mike","John");
    }
    
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car("red",4,23);
    var oCar2 = new Car("blue",3,25);
    
    oCar1.drivers.push("Bill");
    
    alert(oCar1.drivers);	//输出 "Mike,John,Bill"
    alert(oCar2.drivers);	//输出 "Mike,John"
    

    现在:属性在构造函数创建,方法在原型链上创建。

      

      

  • 相关阅读:
    mysql复制那点事
    全排列问题
    56. Merge Interval
    2. Add Two Numbers
    20. Valid Parentheses
    121. Best Time to Buy and Sell Stock
    120. Triangle
    96. Unique Binary Search Trees
    91. Decode Ways
    72. Edit Distance
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4809216.html
Copyright © 2011-2022 走看看