浅谈面向对象基础以及JS中如何实现面向对象

        本篇博客主要是谈关于面向对象的问题,主要包括:面向对象的基本概念创建对象的方式、以及构造函数需要注意的问题

目录

一、面向对象的基本概念

1、什么是面向对象?

2、面向对象的三大特点

3、面向对象开发的好处

二、创建对象的四种方式

1、字面量创建方式

2、调用系统内置构造函数

3、工厂函数的方式

4、创建自定义构造函数

三、自定义构造函数需要注意的问题

1、函数名首字母要大写

2、构造函数不需要写return

3、构造函数能当成普通函数用吗?

4、函数中的this指向问题


一、面向对象的基本概念

1、什么是面向对象?

        在接触面向对象之前,要了解一点:面向对象不是一种语法,而是一种思想,是一种编程模式!

        我们有两种编程模式:

  • 面向过程开发:关注的重点是开发的过程,关注每一步,每一个变量的创建,变量和变量之间的关系、执行顺序等,大多数情况是专门为某一特定功能而编写的。
  • 面向对象开发:关注的重点是对象,需要一个对象来帮助我们做事情,我们却不需要关注对象中的实现过程是怎么样的,只需要其执行结果就好。

·面向过程开发:

var a=0;
a++;
a++;
alert(a)

·面向对象开发:

var num=Math.random()
console.log(num)

·通过以上两个例子不难看出,面向过程和面向对象开发方式的区别,并且还可以看出,在JS中的函数:Math等,都是以面向对象的形式被程序员所调用,得到结果。

那么为什么程序员可以通过对象名.方法名()的方式,就能直接运行方法并得到结果呢?这就涉及到面向对象的三大特性之一:封装。

2、面向对象的三大特点

        面向对象有三大特点:封装、继承、多态

  • 封装:简单地说就是将某一段重复代码写在自定义函数中,在需要这段代码的时候,直接调用该函数。
  • 继承:在封装了一个函数的基础上,创建一个新的函数,该新函数能够使用原函数所有的属性和方法,并且也能够有自己的属性和方法。
  • 多态:可以根据传入的参数数量、类型等的不同,返回不同的结果。

3、面向对象开发的好处

  1. 不适合初学者,但是逼格高!
  2. 把每个功能分开写,便于日后的维护;
  3. 减少代码的重复编写;

二、创建对象的四种方式

1、字面量创建方式

        也就是直接通过var声明一个变量,然后一个大括号。

var obj={

    "属性名":属性值,
    ...

    "方法名":function(形参列表){
        函数体
    }
}

        如何访问对象中的属性和方法?

  • 对象名.属性名 === 对象名["属性名"]
  • 对象名.方法名() === 对象名["方法名"]()

        注意:

                1、访问到不存在的属性和方法,返回的结果是undefined;

                2、可以随时随地添加不存在的属性和方法;

                3、希望获取到对象之中的所有东西,需要遍历:使用for...in循环

2、调用系统内置构造函数

        JS提供了一个对象的构造函数。

var obj=new Object()
obj.属性名="属性值"

3、工厂函数的方式

        也就是自定义函数。

function createObj(name,age,arr){
    var obj={}
    obj.name=name,
    obj.age=age,
    obj.material=arr
    return obj
}
createObj("xxx",11,[1,2,3,4]) 

        使用工厂函数的方式,支持代码复用,也不需要关心函数内部怎么执行和返回,只需要传参数得到结果就行。

4、创建自定义构造函数

        也就是在方式3的基础上,使用new关键字,函数内部也稍有改变。

function createObj(name,age){
    this.name=name
    this.age=age
}
var obj=new createObj("xxx",18)
console.log(obj)

        使用了new关键字,就变成了构造函数,会在函数内部自动的创建一个对象,并且自动返回。在调用处使用变量接收。

        函数中使用this给构造函数的实例化对象上添加属性和方法。

        方式3和4都可以形成面向对象开发的模式,但工厂函数方式还是不如构造函数方式来的简单。

三、自定义构造函数需要注意的问题

1、函数名首字母要大写

        这个不是硬性要求,只是这样写更符合规范。

function CreateObj(){}

2、构造函数不需要写return

        因为return在使用构造函数的时候,会自动生成

        如果写了return:

  • 如果返回的是基本数据类型,对调用该函数的人来说,可能没什么用;
  • 如果返回的是复杂数据类型,那么会覆盖函数原本的内容,那么返回的结果也就不是我们所要的了;

3、构造函数能当成普通函数用吗?

        可以当成普通函数,但最后的结果可能不是我们所需要的。

  • 首先,函数没有return,也就是说没有返回值,外部使用变量接收的话,得到的结果是undefined
  • 其次,定义在全局作用域下的构造函数,函数内部的this指向的是window这个全局对象,也就是说,构造函数中的this.属性名=xxx是给window对象添加了属性,并赋值为xxx,那么想要获取这个属性就得:window.属性名

4、函数中的this指向问题

  • 在构造函数只是定义完成,没有执行new阶段时,函数内部的this没有指向任何地方;
  • 使用new关键字,也叫做实例化。在new阶段,实例对象已经生成了,不一定需要一个变量去接收(栈存储和堆存储的问题),所以this指向的是new阶段生成的实例化对象
function CreateObj(name){
    this.name=name
}
new CreateObj("xxx") //new过程===实例化过程
//此时对象已经生成了

猜你喜欢

转载自blog.csdn.net/txl2498459886/article/details/126795263