JavaScript | 教你如何理解面向对象(一)

304 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第14天,点击查看活动详情

一、面向对象基本描述

以对象作为中心思想的编程方法,对象可以理解为真真正正存在的东西,特点是不固定,这样来说或许会有点抽象,面向对象到底是个什么。其实面向对象就是符合人的思维习惯,通过人的思维来理解有很简单了。

示例以人的思维来模拟面向对象

比如我要写一篇文章,那么以面向对象的的角度看是:

  • 首先以对象本身为中心,主角是:我
  • 我需要拥有:电脑、键盘、鼠标
  • 我需要做的事:敲键盘打字、想想今天写点什么、需要查阅资料... 就是围绕一个对象为中心点,去做一些准备工作以及要做什么事,就很好理解了。

二、类和对象

通过了解了什么是面向对象,有了一个初步概念,再详细的了解一下对象,类就是一类事物,就不做详解了,主要说说对象。

对象的声明方式

1.对象字面量方式

    var person = {
      name:'lucky',
      age:18do:function(){
        console.log('Playing games is awesome')
      },
      '1a':'命名不符合命名规则',
      obj:{first:'1',last:'2'}
    }

需要注意的点:

  • 'name' = 'lucky'这种键值对它的key也可以加上引号,主要是针对你的key的变量名符不符合命名规则,不合符则可以加上引号
  • 比如用数字打头'1a'= 'lucky',那么加引号也是可以成功命名的,只是打印的时候需要用方括号来访问,也就是console.log(person['1a'])
  • 就如obj:{first:'1',last:'2'}对象的属性值也可以是对象

2.Object 构造函数创建

var person = new Object({
      name:'lucky',
      ageL:18do:function(){
        console.log('Playing games is awesome')
      },
      '1a':'命名不符合命名规则',
      obj:{first:'1',last:'2'}
})

需要注意的点:

  • new 是操作符表示调用后面的内容,new Object()就是创建了一个Object类型的对象
  • new后面Object、Array不是类,实际上是函数,使用new来调用某个函数时,可以说创建了一个xxxx类型的对象

关于两种声明方式的总结

  • 对象字面量方式创建对象的方法目的在于简化包含大量属性的时候的创建过程(推荐使用)
  • Object类型的实例是一个万能的对象,它可以根据其中的属性、方法,存储任何东西

通过对象浅谈一下鸭子类型(很有意思的一个东西)

这种类型让我们只关心对象的行为,不关心对象本身(你是不是鸭子不重要!!!)

var duck = {
      varieties:'真正的鸭子',
      color:'白色',
      jiao:function(){
         console.log('嘎嘎嘎');
      }
  }

  var cat = {
      varieties:'猫',
      color:'黑色',
      jiao:function(){
          console.log('嘎嘎嘎');
      }
  }

  //真正的鸭子和猫都来到了合唱团
  var hechangtuan = [duck,cat];
 //无论猫还是鸭子,只注重它的行为,相当于只要它具备某一类的行为,那我们就称它是某一类的生物
  for (var i = 0 ; i < hechangtuan.length ; i++) {
      hechangtuan[i].jiao();
  }

对象的基本操作

访问对象对象中的属性

  • 使用.表示法来访问(建议使用的)
  • 使用[]表示方法访问。这种访问方式的优点在于其中可以放置变量、表达式
    • 中括号中可以进行运算(表达式、变量)
    • 如果键名不符合规范那么必须要使用[]来访问(上面有详细说明)
    • 注意:如果访问的属性不存在那么将会返回undefined,如果访问的变量不存在那么将会报错
  • 增加、修改属性(有就修改,没有就增加)
  • 删除属性 格式: delete 对象.属性
    • 注意:var声明的变量不能够使用delete删除。但是不用var声明的变量可以使用delete删除,因为不用var声明的所谓的变量只不过是window对象上面的属性

3. 工厂模式声明对象

  • 优点:用Object和字面量方式来创建对象会产生多个对象时候会有大量的重复的代码,而工厂模式声明则弥补了这一缺点。
  • 缺点:无法确定创建的对象 是谁构建的。

创建方式

function createPerson(name,age,sex,hobby){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sex = sex;
    obj.hobby =hobby;
    return obj;
}
createPerson('lucky',18,'nan',['养鱼'])

4. 使用函数构造调用来创建对象

缺点:方法无法共享

  function Person(name, sex) {
            //构造函数中,this指向其实例化对象,但是构造函数必须是new调用才行
            this.name = name;
            this.sex = sex;
            this.doThing = function () {
                alert("就这")
            }
        }
        var fn1 = new Person("lucky", "nan");
        var fn2 = new Person("li", "nv");
        console.log(fn1.constructor === Person) //true
        console.log(fn1.doThing === fn2.doThing); //false 

5.构造函数+原型方法

弥补构造函数创建的缺点。方法能共享

      function Person(name, sex) {
            //构造函数中,this指向其实例化对象,但是构造函数必须是new调用才行
            this.name = name;
            this.sex = sex;
        }
        Person.prototype.doThing = function () {
            alert("就这")
        }
        var fn1 = new Person("lucky", "nan");
        var fn2 = new Person("li", "nv");
        console.log(fn1.constructor === Person) //true
        console.log(fn1.doThing === fn2.doThing); //true

好了,以上就是本篇文章的分享,感谢阅读!