美文网首页前端设计编程
JavaScript面向对象编程

JavaScript面向对象编程

作者: 前白 | 来源:发表于2019-07-29 09:35 被阅读15次

    1:基本概念

    面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。

    这句话的意思是:每个对象能够接受信息,处理数据和发送消息给其他对象;这就意味着在这个编程模式下,每一个对象都是一个独立的个体,它可以接收,可以处理,然后再把消息发送出去。每个对象都可以被看作是一个拥有清晰角色或责任的独立个体。

    使用面向对象编程是为了促进更好的灵活性和可维护性。

    面向对象的重要知识点:

    Namespace命名空间

    Class 类(定义对象的属性和方法)

    Object 对象(类的一个实例)

    Property 属性(对象的特征)

    Method 方法(对象的能力)

    Constructor 构造函数(对象初始化的瞬间被调用的方法)

    Inheritance 继承(继承另一个类的特征)

    Encapsulation 封装(把数据和相关的方法绑定在一起使用)

    Polymorphism多态(不同类可以定义相同的方法或属性)。

    面向对象与面向过程比较,面向过程更注重过程。

    2:Namespace 命名空间

    命名空间只是另一个包含方法、属性和对象的对象。在js中要有独立的命名空间,首先需要创建全局变量,不同的全局变量用于区分不同的命名空间。因为js最顶层只有一个全局的命名空间,然后在全局变量上面增加一些变量、方法和功能,这些就是这个对象的属性。

    • 命名空间是一个包含方法,属性和对象的对象
          var myNameScape = myNameScape || {};
          
          // 子命名空间 
          myNameScape.event = {};
          
          // 定义方法和属性 
          myNameScape.commonMethods = {
              name: '',
              validateName: function(name){
                  // name格式验证 
              },
          };
          
          // 定义方法 
          myNameScape.event = {
              addListener: function(el, type, fn) {
                  // ... 
              },
              removeListener: function(el, type, fn) {
                  // ...
              },
          }
    
    • 内置对象
      常见的内置对象:Math、Array、Object

    3:Class 类(构造函数)

    因为JavaScript是一种基于原型的语言,所以没有类声明语句。因此这个类就是构造函数。
    
    它是用方法作类,比如:
    
        function Person(){
            
        }
        
        var Person = function(){
        
        }
    

    或者当我们要把Person实例化时,我们需要重新new Person,然后我们就得到了Object也就是对象。

    4:Object 对象(类的实例)

    function Person(){
        
    }
    var person1 = new Person();
    var person2 = new Person();
    

    5:构造器(Constructor)

    构造器是对象中的一个方法,每次实例化都会被调用;JavaScript中函数可以作为构造器使用;每个声明的函数都可以在实例化后被调用执行。

        function Person(){
           console.cog('Person created!');
        }
        var person1 = new Person();
        var person2 = new Person();
    

    6:Property 属性

    类中包含的变量。

        function Person(firstName) {
            this.firstName = firstName;
            console.log('Person created!');
        }
        
        var person1 = new Person('Alice');
        var person2 = new Person('Bob');
    

    7:Method 方法

    方法与属性相似;方法是函数,属性可以被定义为函数。

        function Person(firstName) {
            this.firstName = firstName;
        }
        Person.prototype.sayHello = function(){
            console.log("Hello,I'm" + this.firstName);
        };
        
        var person1 = new Person('Alice');
        var person2 = new Person('Bob');
    

    8:Inheritance 继承

    继承:子类可以使用父类的所有功能,并且对这些功能进行扩展。继承的过程,就是从一般到特殊的过程。

    继承本质上一个是原型链继承,一个是构造函数继承,在此之后也衍生出很多,一般来讲,最好的方法就是第三种继承:混合继承。借助原型链和构造函数继承来达到一个较完善的效果。

    9:Encapsulation 封装(把数据和相关的方法绑定在一起使用)

    封装:把客观事物封装成抽象的类,隐藏属性和方法的实现细节,仅对外公开接口。

        function Person(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        Person.prototype.show = function (){
            console.log(this.name + ' ' + this.sex + ' ' + this.age);
        }
        var person = new Person('Eric', 18, '男');
    

    10:Polymorphism 多态

    多态就是通过对传递的参数判断来执行逻辑,即可实现一种多态处理机制。

    多态实际上是同一操作作用于不同的对象, 可以有不同的解释, 产生不同的执行结果。

    多态最根本的作用就是通过把过程化的条件语句转化为对象的多态性,从而消除这些条件分支语句。

        function Person(name, age){
            this.name = name;
            this.age = age;
        }
        
        Person.prototype.toString = function() {
            return "I am a Person, my name is " + this.name;
        }
        
        function Man(name, age){
            Person.apply(this, arguments);
        }
        
        Man.prototype = Object.create(Person.prototype);
        
        Man.prototype.toString = function() {
            return "I am a Man, my name is"+this.name;
        }
        
        var person = new Person("Neo", 19);
        var man1 = new Man("Davin", 18);
        var man2 = new Man("Jack", 19);
    

    相关文章

      网友评论

        本文标题:JavaScript面向对象编程

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