JS面向对象的几种写法

Posted 2020-10-15 前端学堂

JS 中，面向对象有几种写法。归纳下，大概有下面这几种：工厂模式，构造函数模式，原型模式，构造函数与原型模式的混合使用，原型链继承，借用构造函数继承。

    一、工厂模式

 function person (name,age,jpb){
    var o={};//定义o这个对象
    o.name=name;
    o.age=age;
    o.job=job;
    o.sayName=function(){
       console.log(this.name);
          }  
      return o;

}


  var demo=person(‘tj‘,22,‘fe‘);

  console.log(demo);

   闭包使用的原理与之很相似，最后返回的

 二、构造函数模式

  构造函数本身也是函数，只不过是一个创建对象的函数

 

function Person(name,age){   //构造函数以大写字母开头，普通函数以小写字母开头
     this.name=name;
     this.age=age;
     this.sayName=function(){
            console.log(this.name)
   };
}

 var demo2=new Person(‘tj2‘,23)

   console.log(tj2)

 }

  使用构造函数有一些注意点：必须使用new操作符，调用构造函数会经历以下四步：

     1、创建一个新的对象

     2、将构造函数的作用域给了新对象（this指向新对象），其中this 是全局变量，window.age  获取的结果是一样的。

     3、对新对象添加属性

     4、返回新对象

 

  三、原型模式

  每个函数都有一个prototype属性，这个属性是一直指针，指向一个对象，这个对象的用途是包含可以由特定类型的实例共享的属性和方法。

  使用原型对象的好处是可以让所有对象实例共享他所包含的属性和方法。不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。

 function Person(){  }
   
 Person.prototype.name =‘tj3‘;
 Person.prototype.age=24;
 Person.prototype.sayName= function(){
     alert(this.name)

}

 var demo3= new Person();
 console.log(demo3);

//更简单的原型办法
   
  function Person(){
  }

  Person.prototype={
     name:‘tj4‘,
     age:25,
     sayName:function(){
       alert(this.name)
   }
};

  var demo4=new Person();
  console.log(demo4);

 

 四、组合使用构造函数和原型模式

   构造函数模式用于定义实例属性，而原型模式定义方法和共享的属性。这种混合模式还支持向构造函数传递参数。

   

 1     function Person(name,age,job){
 2           this.name=name;
 3           this.age=age;
 4           this.job=job;
 5           this.sayName=function(){
 6             alert(this.name)
 7        }
 8      }
 9 
10    Person.prototype ={
11          sayJob:function(){
12             console.log(this.job);
13         }
14      }
15 
16 
17     var person1=new Person(‘tj‘,22,‘fe‘);

 

  五、原型链继承

      原型链继承的主要思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

      注意点：通过原型链继承是不能使用对象字面量创建原型方法，这样会重写原型链！

        

     function SuperType(){
      this.color=[‘red‘,‘blue‘];
       }
      
    function SubType(){

  }

  Subtype.prototype=new SuperType();//继承了SuperType

    var instance1=new SubType();
       console.log(instance1);

 

 六、借用构造函数继承

  其实就是用call和apply实现继承

 1   function wanda(){
 2      this.money=[1,2,3]
 3    }
 4 
 5    function sicong(){
 6        wanda.call(this);
 7     }
 8 
 9    var sc = new sicong();
10     sc.money.push(666)
11     console.log(sc)

 

七、组合继承

   将原型链和借用构造函数的技术组合起来一起用，好处是既能实现函数的复用，又能保证每个实例有自己的属性。

 function SuperType(name) {
        this.name = name;
        this.color = [‘red‘, ‘blue‘];
    }
    SuperType.prototype.sayName = function() {
        console.log(this.name);
    };
    function SubType(name, age) {
        SuperType.call(this, name);//继承属性
        this.age = age;
    }
    SubType.prototype = new SuperType();//继承方法
    var instance1 = new SubType(‘tj‘, 22);
    instance1.sayName();