简单了解一下js的面向对象编程

简单了解一下js的面向对象编程

  • 如果多少有编程语言基础的都知道什么是面向对象编程(在这里就不过多介绍了)。

    • 第一种使用js的function 函数进行面向对象编程
    • 以前我们都是下面这种方式使用function关键字的
         function fun(){
          console.log("hello world")
      }
      fun() //输出 hello world
      
    如果我们进行更加复杂的数据操作显然以上用法不能满足我们的需求
    • 我们用面向对象来进行使用function

      function Class(data){
            this.a = data.a
            this.b = data.b
            this.method = ()=>{
                return this.a+this.b;
            }
        }
        var c =new Class(
            {
                a:1,
                b:2
            }
        );
        console.log(c.method())
      

      定义一个类和定义一个函数没有任何区别关键在于 function 函数体中的写法 使用this进行类属性定义,在调用类的时候使用new 关键字进行类的创建(注意如果你的构造函数返回的是类似上面这种{a:1,b:2} 切记在function中调用构造数据时候不要使用JSON.pare()方法进行转化,因为上面中 data 已经是一个对象了。)

    • 既然是面向对象当然的少不了继承了,但是不幸的是js不支持继承机制,幸运的是我们可以使用js中类的原型prototype来达到继承的目的

       父类
        function Class(data){
           this.a = data.a
           this.b = data.b
           this.method = ()=>{
               return this.a+this.b;
           }
       }
       子类
       function Obj(){	
        //静态方法
          Obj.staticF = ()=>{
              console.log("我是一个function静态方法")
          }	
       }
       //复制父类给子类
       Obj.prototype = new Class(
           {
               a:1,
               b:2
           }
       );		
       var obj = new Obj()	
       //调用父类方法	
       console.log(obj.method())//输出hello world
       console.log(Obj.staticF())//输出hello world
      
    • 第二种 使用ES6的class关键字来进行面向对象编程

      class Map  {
          //定义一个无参构造函数
           constructor(){
              //定义一个类属性是json格式的(也可以是其它格式)
               this.data = {};
           }
           //给json赋值并返回当前对象用于链式调用
           put(key,value){
               this.data[key] = value;
               return this;
           }
           getData(){
               return this.data
           }
       }
       // 创建实例对象
       var map = new Map()
       //链式赋值给对象属性
       var data = map.put("name","张三").put("age",12).getData()
       console.log(data)
      

      我们看到使用class创建类很类似面向对象语言的语法。

    • 我们接着来看如何进行类的继承

      // 父类
         class Class1 {
         getExt(){
            console.log("我将要被Map继承")
         }
      }
      //子类
      class Map extends Class1{
          constructor(){
             //调用父类构造函数
              super();
              this.data = {};
          }
          put(key,value){
              this.data[key] = value;
              return this;
          }
          //公共方法
          getData(){
              return this.data
          }
           //静态方法
          static staticFunc(){
             console.log("我是一个静态方法")
          }
      }
      
      var map = new Map()
      var data = map.put("name","张三").put("age",12).getData()
      console.log(data)
      console.log(map.getExt()) 
      console.log(Map.staticFunc())	
      

      注意:如果继承父类 ,子类中的构造函数需要使用super()来继承父类的构造函数,而且必须是第一行代码。
      js语法糖:使用`${变量}sdsd`来代替 “sada”+”sdfsf“拼接字符串

      • 对象字面量
          var book = {
             title: 'Modular ES6',
             author: 'Nicolas',
             publisher: 'O´Reilly'
           }
        

你可能感兴趣的:(前端,对象)