深入学习js的面向对象

loostudy 发布于2019-08-22 18:18 / 1364人阅读

摘要：字符串也可以是一个对象日期是一个对象数学和正则表达式也是对象数组是一个对象甚至函数也可以是对象一般的语言，都是利用类来创建对象，完成面向对象的过程。

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

我们必须明白面向对象的具体含义，尤其对于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=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关键词完成继承的操作。

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编程学习

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

云服务器 GPU云服务器深入java面向对象 js 面向对象视频 oop面向对象 js js面向对象开发表格

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95720.html

JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
PHP学习路线图

摘要：学习路线图建议最后买一个域名和阿里云服务器，真正的将代码部署到云服务器上去，走一次上线流程，用一下管理一下代码会更棒。建议学习路线图这个时候使用写一个大并发的多服务器的秒杀出来。 PHP学习路线图在网上很多人公布了太多的PHP学习路线图，本人在互联网公司工作十余年，也带了很多PHP入门的新手，将他们的一些问题和学习路线图为大家整理出来，希望很多小白少走弯路。一、网上某些错误的学习...

wapeyang 2019-06-27 16:33 评论0 收藏0
面向对象的 JavaScript

摘要：是完全的面向对象语言，它们通过类的形式组织函数和变量，使之不能脱离对象存在。而在基于原型的面向对象方式中，对象则是依靠构造器利用原型构造出来的。 JavaScript 函数式脚本语言特性以及其看似随意的编写风格，导致长期以来人们对这一门语言的误解，即认为 JavaScript 不是一门面向对象的语言，或者只是部分具备一些面向对象的特征。本文将回归面向对象本意，从对语言感悟的角度阐述为什...

novo 2019-08-21 10:49 评论0 收藏0
深入学习js之——原型和原型链

摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。开篇：在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

FingerLiu 2019-08-23 15:25 评论0 收藏0
深入学习js之——原型和原型链

摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。开篇：在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

xialong 2019-08-23 15:04 评论0 收藏0