zoukankan      html  css  js  c++  java
  • JS定义类或函数

    1、工厂模式
    <script>
    function createCar(){
    var oCar = new Object();
    oCar.color="red";
    oCar.doors=4;
    oCar.showColor=function(){
    alert(this.color);
    }
    return oCar;
    }

    //调用
    var oCar1 = createCar();
    var oCar2 = createCar();
    oCar1.color = "black";
    oCar1.showColor();
    oCar2.showColor();
    </script>
    使用new关键字已经深入人心,因此我们使用上面的方法去定义总感觉别扭,
    并且每次调用时都去创建新的属性以及函数,功能上也不实际。
    下来我们看看构造函数的形式定义类。

    2、构造函数
    <script>
    function Car(color,doors){
    this.color = color;
    this.doors = doors;
    this.showColor = function(){
    alert(this.color);
    }
    }

    //调用
    var car1 = new Car("red",4);
    var car2 = new Car("blue",4);
    car1.showColor();
    car2.showColor();
    </script>
    每次new 对象时都会创建所有的属性,包括函数的创建,也就是说多个对象完全独立,
    我们定义类的目的就是为了共享方法以及数据,但是car1对象与car2对象都是各自独立的属性与函数,
    最起码我们应该共享方法。这就是原型方式的优势所在。

    3、原型方式
    <script>
    function Car(){}
    Car.prototype.color="red";
    Car.prototype.doors=4;
    Car.prototype.drivers = new Array("Tom","Jerry");
    Car.prototype.showColor=function(){
    alert(this.color);
    }

    //调用
    var car1 = new Car();
    var car2 = new Car();
    call.showColor();
    car2.showColor();
    alert(car1.drivers);
    car1.drivers.push("stephen");
    alert(car1.drivers); //结果:Tom,Jerry,stephen
    alert(car2.drivers); //结果:Tom,Jerry,stephen
    //可以用json方式简化prototype的定义:
    Car.prototype =
    {
    color: "red",
    doors: 4,
    drivers: ["Tom", "Jerry",'safdad'],
    showColor: function() {
    alert(this.color);
    }
    </script>
    首先这段代码的构造函数,其中没有任何代码,接下来通过对象的prototype属性添加属性定义Car对象的属性。
    这种方法很好,但是问题是Car的对象指向的Array指针,Car的两个对象都指向同一个Array数组,
    其中一个对象car1改变属性对象的引用(数组Array)时,另一个对象car2也同时改变,这是不允许的。
    同时该问题也表现在原型不能带任何初始化参数,导致构造函数无法正常初始化。
    这需要另一种方式来解决:那就是混合的构造函数/原型模式。

    4、混合的构造函数、原型模式
    <script>
    function Car(color,doors){
    this.color = color;
    this.doors = doors;
    this.drivers=new Array("Tom","Jerry");
    }
    Car.prototype.showColor=function(){
    alert(this.color);
    }
    //调用
    var car1 = new Car('red',4);
    var car2 = new Car('blue',4);
    car1.showColor();
    car2.showColor();
    alert(car1.drivers);
    car1.drivers.push("stephen");
    alert(car1.drivers); //结果:Tom,Jerry,stephen
    alert(car2.drivers); //结果:Tom,Jerry
    alert(car1 instanceof Car);
    </script>

  • 相关阅读:
    业务逻辑安全之登陆认证模块
    linux下的tcpdump
    wirshark使用(二)
    wirshark 使用(一)
    MVC框架的代码审计小教程
    记一次发卡网代码审计
    HTML知识点(一)
    jQuery基础、效果和事件
    Ajax知识(二)
    jQueryHTML和插件、display和overflow和visibility的区别
  • 原文地址:https://www.cnblogs.com/xiaoweigogo/p/7803230.html
Copyright © 2011-2022 走看看