JS面向对象的几种写法

Posted 前端学堂

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS面向对象的几种写法相关的知识,希望对你有一定的参考价值。

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();
技术分享图片

 







































以上是关于JS面向对象的几种写法的主要内容,如果未能解决你的问题,请参考以下文章

js面向对象的几种常见写法

JS面向对象的几种写法2

第184天:js创建对象的几种方式总结

js 面向对象学习6 几种面向对象写法的对比

es6中class的几种属性和方法以及对应的es5写法

js中面向对象(创建对象的几种方式)