美文网首页
js面向对象的几种写法

js面向对象的几种写法

作者: nzjcnjzx | 来源:发表于2019-07-23 11:06 被阅读0次

一、工厂模式

function person (name,age,job){
   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(demo2)
 }
 使用构造函数有一些注意点:必须使用new操作符,调用构造函数会经历以下四步:

     1、创建一个新的对象

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

     3、对新对象添加属性

     4、返回新对象

三、原型模式

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);

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

function Person(name,age,job){
          this.name=name;
          this.age=age;
          this.job=job;
          this.sayName=function(){
            alert(this.name)
       }
     }

   Person.prototype ={
         sayJob:function(){
            console.log(this.job);
        }
     }


    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);

六、借用构造函数继承

function wanda(){
     this.money=[1,2,3]
   }

   function sicong(){
       wanda.call(this);
    }

   var sc = new sicong();
    sc.money.push(666)
    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面向对象的几种写法

    1、工厂模式,像流水线 纠正,去掉new 2、构造函数模式 3、原型模式 4、构造函数+原型模式 5、json模式...

  • js面向对象的几种写法

    一、工厂模式 二、构造函数模式 三、原型模式 四、组合使用构造函数和原型模式 五、原型链继承 六、借用构造函数继承...

  • JS 的面向对象

    JS 不是一门面向对象的语言,但是很多情况我们需要面向对象。 一、JS 继承的常用写法。 为什么一上来就写常用写法...

  • 归纳下js面向对象的几种常见写法

    //定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 varCircle...

  • ES6中的CLASS继承

    JS是一种基于对象的语言,要实现面向对象,写法跟传统的面向对象有很大的差异。ES6引入了Class语法糖,使得JS...

  • javascript中的面向对象

    相信大家对javascript中的面向对象写法都不陌生,那还记得有几种创建对象的写法吗?相信大家除了自己常写的都有...

  • JS中的面向对象

    最近在复习JS基础,对于JS中的面向对象写法在此总结一下。 第一种:TS写法(ES6写法) 这种写法是在做项目里经...

  • JS面向对象精要(二)_函数

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(三)_理解对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(四)_构造函数和原型对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

网友评论

      本文标题:js面向对象的几种写法

      本文链接:https://www.haomeiwen.com/subject/excolctx.html