深入学习js的面向对象

在之前的一篇文章的末尾我提到了JavaScript的对象创建方法,可以利用函数,内置对象和this等关键词实现对象的创建。但是很遗憾,我最先接触的面向对象的编程语言是java,因而对于这些实现面向对象的方法并非自己的首选。下面是那篇文章:
记一次两小时的js编程学习

我们必须明白面向对象的具体含义,尤其对于JavaScript中来说,因为很明显它与其他语言中存在着较大的差别。JavaScript 提供多个内建对象,比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。JavaScript中对象被当做了特殊数据结构struct,而一般的语言被当做类的实例化。

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象
    一般的语言,都是利用类来创建对象,完成面向对象的过程。举个最熟悉的java语言的例子:
    1
    2
    3
    Scanner input=new Scanner(System.in);
    int num=input.function();
    String num=input.var;

而JavaScript却不同,这是由于JavaScript的设计本质上是一种面向过程的语言。虽然JavaScript如今早已演变成一种面向对象的语言,却也不使用类来创建对象。

直到2015年6月的ES6,OOP被标准化。举个例子:

1
2
3
4
5
6
7
8
9
function Car(Color,Year,Make,Miles){
this.color=Color;
this.year=Year;
this.make=Make;
this.odometerReading=Miles;
this.setOdometer=function(newMiles){
this.odometerReading=newMiles;
}
}

这里有一个很严肃的问题,即类的扩展,在js中来说就是对象属性和方法的扩展。java中有继承extends来实现对父类的继承。但JavaScript中却根本没有类的概念,就只能另寻它法完成扩展和继承。

在JavaScript中,当一个对象已经被实例化,如果我想想让它拥有新的方法和属性就需要借用关键字prototype。举个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function Car(color){
this.color=color
}
var car=new Car("red")
console.log(car.color)
// car.length=5
// car.setColor("green")
Car.prototype.length=5
Car.prototype.setColor=function(newColor){
this.color=newColor
}
console.log(car.length)
car.setColor("green")
console.log(car.color)
-----------------------------------------------------
red
5
green
[Done] exited with code=0 in 0.206 seconds

我们需要给car加上长度和设置新的颜色,需要利用没有实例化之前的Car,再借用关键词prototype才可以完成添加属性和新方法的操作。

除了扩展,我们还需要继承,JavaScript依旧使用prototype关键词完成继承的操作。

1
2
3
4
5
6
7
8
9
function Pet(){
this.animal="pet"
this.name="ahhh"
}
function Cat(){
this.age=2
}
//接下来就是让Cat这个类拥有Pet类的属性和方法的操作
Cat.prototype=new Pet() //给Cat类加上Pet类的全部属性和方法

为什么说上面的Cat和Pet是类,如同java,我们默认类的首字母大写。JavaScript使用函数面向对象的好处在于可以在函数中添加众多的变量和函数。内置的Object()过于简单。

推荐阅读:
记一次两小时的js编程学习

个人博客十八
欢迎大家交流博客,我擅长串改大佬们写的源码哟!

网站已经运行:0天

Hosted by Coding Pages