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"
    

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

      

      

  • 相关阅读:
    Java-idea-FindBugs、PMD和CheckStyle对比
    Java-idea-PMD源文件级别潜在bug查看
    Java-idea-FindBugs字节码级别潜在bug查看
    Java-idea-Checkstyle自动化代码规范检查
    js-jquery-从SweetAlert到SweetAlert2
    js-jquery-SweetAlert2【二】配置与方法
    js-jquery-SweetAlert2【三】INPUT TYPES
    js-jquery-对象与JSON字符串互相转换
    js-jquery-数组遍历
    java-小技巧-001-Long序列化到前端js不支持
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4809216.html
Copyright © 2011-2022 走看看