2025年js面向对象编程_JavaScript高级编程

js面向对象编程_JavaScript高级编程目录 面向对象编程 ES6 中的类和对象 构造函数和原型 对象原型 proto constructor 构造函数 构造函数 实例 原型对象三者之间的关系 原型链 扩展内置对象 继承 面向对象编程 有两大编程思想 面向过程和面向对象 面向过程编程 POP Process oriented programming 面向过程即分析出解决问题所需要的步骤 然后用函数将这些步骤一步步实现

目录

面向对象编程

ES6中的类和对象

构造函数和原型

对象原型__proto__

constructor构造函数

构造函数、实例、原型对象三者之间的关系

原型链

扩展内置对象

继承

----

面向对象编程

有两大编程思想:面向过程和面向对象;

面向过程编程POP(Process-oriented programming)

面向过程即分析出解决问题所需要的步骤,然后用函数将这些步骤一步步实现,使用的时候再一个个的一次调用就可以了;

即将大象装进冰箱,从面向过程来看,需要打开冰箱门、装进去大象、关上冰箱门

面向对象编程OOP(Object Oriented Programming)

面向对象即把事务分解成为一个个对象,然后由对象之间分工与合作;是以对象功能来划分问题,而不是步骤;在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工;

面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目;

具有封装性、继承性、多态性等特性;

即将大象装进冰箱,从面向对象来看,要先找出对象,并写出 这些对象的功能;如大象对象,冰箱对象;

面向过程与面向对象编程思想两种方式对比:

面向过程面向对象
优点性能比面向对象高,适合跟硬件联系很紧密的东西,如单片机就采用的面向过程编程易维护、易复用、易拓展,可设计出低耦合的系统,使系统更加灵活、更加易于维护
缺点没有面向对象易维护、易复用、易拓展性能比面向对象低

面向对象的思维特点:

1、抽取(抽象)对象共用的属性和行为组织(封装)成一个类(模板);

2、对类进行实例化,获取类的对象

面向对象编程我们考虑的是有哪些对象,按照面向对象的思维特点,不断的创建对象,使用对象,指挥对象做事情;

ES6中的类和对象

对象

在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,如字符串、数值、数组、函数等;

对象是由属性和方法组成的:

属性:事物的特征,在对象中用属性来表示(名词);

方法:事物的行为,在对象中用方法来表示(动词);

类(class):

在ES6中新增了类的概念,可用class关键字声明一个类,之后用该类实例化对象;

类和对象关系:

类抽象了对象的公共部分,它泛指某一大类(class);

对象特指某一个,通过类实例化一个具体的对象;

创建类

class 类名 { // 此处类名不要加括号

// 类中的函数体

}

创建实例:

var xx = new 类名(); // 类必须使用new实例化对象

类constructor构造函数

constructor()方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例,自动调用该方法。若没有显示定义,类内部会自动给我们创建一个constructor()。

 

输出结果如下:

类中添加方法:

类中所有函数均不需要写function,且多个函数方法之间不需要添加符号分隔;

 

继承

继承是指子类可以继承父类的一些属性和方法,语法如下;

class Father {
// 父类
}
class Son extends Father {
// 子类继承父类
}

看下面一个错误示例:

运行该代码,会报如下错误:

Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
at new Son (ObjTsting.html:24:17)

这是因为子类中无法使用父类的sum方法,在父类方法中this.x和this.y中的this指代的是父类,而子类中传过来的参数中,this.x和this.y指代的是子类,所有会报错;

那要如何继承父类中的参数和方法呢?此时则需要super关键字~

super关键字

它用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可以调用父类的普通函数,上述例子就可以改造成:

 

继承是指若子类有属性和方法,则用子类的属性和方法,若无,则继承父类方法;

子类在构造函数中使用super,必须放到this前面(即必须先调用父类的构造方法,再使用子类的构造方法);

类里面共有的属性和方法一定要加this使用;构造函数中的this 指向的是创建的实例对象;谁调用类中的方法,this就指向谁;

在ES6中类没有变量提升,所以必须要先定义类,才能通过类实例化对象;

构造函数和原型

构造函数和原型是在ES6出来之前存在的,后被类取代;在ES6之前,对象不是基于类创建的,而是用一种成为构造函数的特殊函数来定义对象和它们的特征。

创建对象可通过如下三种方式:

1、对象字面量

2、new Object()

3、自定义构造函数

构造函数是一种特殊的函数,主要用于初始化对象,即为对象成员变量赋初始值,它总与new一起使用,他们可把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面;

在JS中,使用构造函数时要注意以下两点:

1、构造函数用于创建某一类对象,其首字母要大写;

2、构造函数要和new一起使用才有意义

new 在执行时会做四件事情:

1、在内存中创建一个新的空对象;

2、让this指向这个新的对象;

3、执行构造函数里面的代码,给这个新对象添加属性和方法;

4、返回这个新对象(所以构造函数里面不需要return)

实例成员与静态成员

构造函数中的属性和方法我们称为成员,成员可以添加;

实例成员就是构造函数内部通过this添加的成员;实例成员只能通过实例化的对象来访问;不可以通过构造函数来访问实例成员;

静态成员及在构造函数本身上添加的成员;静态成员只能通过构造函数来访问

构造函数的问题

构造函数方法很好用,但是存在浪费内存的问题;

不同实例对象会开辟多个空间用于存放同一个函数,这样就会造成内存浪费;

既然使用同一个对象构建出来的实例对象,那么该函数和属性应该是所有对象所共享的,JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象。注意,这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。因此可以将那些不变的方法,直接定义在prototype上,这样所有对象的实例就可以共享这些方法。

对象原型__proto__

对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在。

__proto__对象原型和原型对象prototype是等价的

__proto__对象原型的意义就在于为对象的查找机制提供一个方向,或者说一条路线,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype,即如下示意图:

constructor构造函数

对象原型(__proto__)和构造函数(prototype)原型对象里面都有一个属性constructor属性,constructor我们称为构造函数,因为它指回构造函数本身。

他主要用于记录该对象引用于哪个构造函数,它可以让原型对象重新指向原来的构造函数。

构造函数、实例、原型对象三者之间的关系

原型链

(图来自黑马程序员pink老师前端教程~)

只要是对象,就有原型对;

当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性;

若没有则查找它的原型(即__proto__指向的prototype对象);

如果还没有就查找原型对象的原型,以此类推一直找到Object为止;

__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说是一条路线

扩展内置对象

可以通过原型对象,对原来的内置对象进行扩展自定义的方法,比如给数组增加自定义求偶数和的功能;

注意:数组和字符串内置对象不能给原型对象覆盖操作Array.prototype = {},只能是Array.prototype.xxx = function() {}的方法

继承

同理,ES6之前亦没有extends继承,我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承;

使用call()方法

调用call()方法可以修改函数运行时的this指向,语法如下:

函数名.call(thisArg, arg1, arg2,....)

其中,thisArg为当前调用函数this的指向对象,args等为传递的其它参数;

编程小号
上一篇 2025-01-23 21:01
下一篇 2025-01-16 12:11

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/hz/147673.html