博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入学习js的面向对象
阅读量:6337 次
发布时间:2019-06-22

本文共 1746 字,大约阅读时间需要 5 分钟。

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

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

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

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

一般的语言,都是利用类来创建对象,完成面向对象的过程。举个最熟悉的java语言的例子:

Scanner input=new Scanner(System.in);int num=input.function();String num=input.var;

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

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

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。举个例子:

function Car(color){    this.color=color}var car=new Car("red")console.log(car.color)// car.length=5// car.setColor("green")Car.prototype.length=5Car.prototype.setColor=function(newColor){    this.color=newColor}console.log(car.length)car.setColor("green")console.log(car.color)-----------------------------------------------------red5green[Done] exited with code=0 in 0.206 seconds

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

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

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()过于简单。

推荐阅读:

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

转载地址:http://koaoa.baihongyu.com/

你可能感兴趣的文章
怎样将现有应用迁移到 VMware NSX
查看>>
赛门铁克收购以色列移动安全初创公司Skycure 旨在构建网络安全防御平台
查看>>
《Photoshop蒙版与合成(第2版)》目录—导读
查看>>
《团队软件过程(修订版)》—第1章1.3节TSPi的设计
查看>>
“最佳人气奖”出炉!4月27号,谁能拿到阿里聚安全算法挑战赛的桂冠?
查看>>
《网页美工设计Photoshop+Flash+Dreamweaver从入门到精通》——2.6 图层与图层样式...
查看>>
《iOS组件与框架——iOS SDK高级特性剖析》——第2章,第2.7节获取线路
查看>>
Spring中 @Autowired标签与 @Resource标签 的区别
查看>>
人工智能凭什么毁灭人类
查看>>
[LeetCode]--349. Intersection of Two Arrays
查看>>
tomcat启动报错
查看>>
mongorocks引擎原理解析
查看>>
用Swift实现一款天气预报APP(一)
查看>>
oracle11g R2 RAC卸载grid
查看>>
ES6 结构和扩展运算符
查看>>
王利阳:电商大促 决战6.18
查看>>
kafka消息传输的事务定义
查看>>
实现LNMMP
查看>>
mysql的pid文件出现问题
查看>>
计算rem单位
查看>>