JavaScript基础3之面向对象关于面向过程、函数式编程、对比、构造函数、原型

VillanelleS

已于 2024-03-07 08:46:44 修改

阅读量659

点赞数 22

分类专栏：前端 JavaScript 文章标签： javascript 原型模式开发语言

于 2024-03-05 22:36:59 首次发布

本文链接：https://blog.csdn.net/qq_34306228/article/details/136459248

版权

前端同时被 2 个专栏收录

84 篇文章 3 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

面向对象

面向过程

按照我们分析好了的步骤，按照步骤解决问题
步骤:函数
函数的调用

函数式编程

编写程序的方法论
利用函数把运算结果包装，
复杂的功能，可以通过组合各种函数计算结果

命令式编程

例如：对数组每一个数字平方变化

var arr = [0,1,2,3,4]
for (let i = 0; i < arr.length; i++) {
	arr[i]= Math.pow(arr[i],2)
}

命令式编程
可读性不强变量声明多。很难排查

函数式编程

[0,1, 2, 3, 4].map(num ⇒ Math.pow(num,2))

通过函数对数据进行转换

特定:

通过函数对数据进行转换
通过串联多个函数来求结果

特性

副作用

//有副作用 修改了外部变量a
var a =1
function test1() {
	a++
	return a
}

// 无副作用 没有修改外部状态
// 多次调用结果都是一样的
function test2(a){
return a +1
}

透明引用

// 有副作用 修改了外部变量a
// 函数内容使用的变量并不属于他的作用域
var a =1
var b =2
function test1() {
return a + b
}

// 无副作用 没有修改外部状态
// 多次调用结果都是一样的
// 函数内部使用的变量是显式传参方式
function test2(a,b){
return a + b
}

不可变变量

指的是一个变量一旦创建后，就不能再进行修改，任何修改都会生成一个新的变量

var obj = Immutable({ a: 1 });
var obj2 = obj.set('a', 2);
console.log(obj);  // Immutable({ a: 1 })
console.log(obj2); // Immutable({ a: 2 })

函数是一等公民

指的是函数与其他数据类型一样，处于平等地位，
可以赋值给其他变量，也可以作为参数，传入另一个函数，
或者作为别的函数的返回值

常见的函数式编程模型

闭包
高阶函数
- map
- filter
- reduce
函数柯里化
函数组合

面向对象

面向对象也是一种开发模型，主要围绕着数据或者对象而不是功能和逻辑来组织代码
他让开发者的关注点由逻辑转为想要操纵的数据，他将数据和方法都包装在一个类中
这样有利于代码的重用和可扩展性。

class Person{
    constructor(name) {
        this.name=name
    }
    say(){
        console.log("我叫："+this.nane)
    }
}

let person1=new Person("张三")
let person2=new Person("李四")

为什么要使用面向对象

面向对象是以对象功能来划分问题，而不是步骤

面向对象程序开发思想中，每一个对象都是功能中心，具有明确的分工
面试对象编程具有灵活性、代码可复用、容易维护和开发的优点，更合适多人合作的大型软件项目
面向对象三大特点：封装、继承、多态

封装

所有的数据和方法都被封装在对象内，由开发者自己选择性的去公开哪些属性和方法，对于创建的实例来说他能访问的只能是这些公开的属性和方法，而对于其他对象来说是无权访问此类或者进行更改，封装这一特性为程序提供了更高的安全性。

继承

继承意味着代码的可重用性，子类和父类这两个概念就是很好的体现，子类拥有父类所有的属性和方法避免数据和方法的重复定义，同时也能够保持独特的层析结构，

多态

多态意味着设计对象以共享行为，使用继承子类可以用新的方法去覆盖父类共享的行为，多态性允许同一个方法执行两种不同的行为：覆盖和重载。

对比

面向过程

优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用面向过程编程
缺点：没有面向对象易维护、易复用、易扩展

函数式编程

优点：代码简洁，易于理解，并发速度快使用 immutable 数据管理方式可以避免掉很多情况的 lock，并发处理速度会很快。出错率少
缺点：性能消耗大、资源占用大

面向对象

优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态的特性，可以设计出低耦合的系统，使系统更加灵活、更加易于维护
缺点：状态的共享、耗内存、性能低

构造函数

用来创建对象
Object Array 原生构造函数

new Object()
new Array()

function Person(name,age){
    this.name=name
    this.age=age
    this.sayName =function (){
        console.log(this.name,this.age)
    }
}

//实例
let person1=new Person("张三",18)
let person2=new Person("李四",25)

person1.sayName()
person2.sayName()

console.log(person1 === person2)
console.log(person1.sayName===person2.sayName)

在这里插入图片描述
通过this实现数据的共享
不同的是通过构造函数创建出的实例对象他们之间彼此是不影响的

构造函数体现了面向对象的封装
构造函数实例对象彼此是互不影响的

存在浪费内存的问题

试图解决一下：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayName = sayName
}

function sayName() {
  console.log(this.name);
}

let person1 = new Person('小明', 18)
let person2 = new Person('小红', 20)

person1.sayName() // 小明
person2.sayName() // 小红

虽然解决了相同逻辑的函数重复定义的问题，但全局作用域也因此被搞乱了，因为那个函数实际上只能在一个对象上调用。如果这个对象需要多个方法，那么就要在全局作用域中定义多个函数。这会导致自定义类型引用的代码不能很好地聚集一起。这个新问题可以通过原型模式来解决。

原型

目的：能够利用原型对象实现方法共享

构造函数通过原型分配的函数是所有对象所共享的
每个函数都会创建一个 prototype 属性，这个属性是一个对象，称为原型对象
原型对象可以挂载函数，对象实例化不会多次创建原型函数，节约内存
可以把那些不变的方法，直接定义在原型对象上面，定义的属性和方法可以被对象实例共享
构造函数和原型对象中的this都指向实例化的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Person(name,age){
        this.name=name
        this.age=age
        Person.prototype.sayName=function(){
            console.log(`我叫${this.name}，今年${this.age}岁了`)
        }
    }

    //实例
    let person1=new Person("张三",18)
    let person2=new Person("李四",25)

    person1.sayName()
    person2.sayName()

    console.log(person1 === person2)
    console.log(person1.sayName===person2.sayName)

    console.dir(Person)
</script>
</body>
</html>

在这里插入图片描述

constructor

默认情况下，所有原型对象自动获得一个名为 constructor 的属性，
作用：该属性指向该原型对象的构造函数
对前面的例子而言，Person.prototype.constructor 指向 Person

原型对象上面默认只会获取constructor属性，其他的所有方法都继承Object

在这里插入图片描述
也可以这样理解

简单理解来说：

使用场景

下面这段代码相当于将prototype原型对象重新赋值了，替换掉了默认的constructor函数，所以为了代码的完整性，还要加上constructor:Person这一行

Person.prototype={
	sayName(){},
	...
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Person(name,age) {
        this.name = name
        this.age = age
    }
    //Person.prototype本身是一个对象，所以直接复用
    //相当于Person.prototype=new Object() === Person.prototype={}
    //此时constructor就是挂载到Object上的，
    Person.prototype={
        constructor:Person,  //如果没有这一行代码，此时constructor就是挂载到Object上的，因此改变constructor的挂载，挂载到Person上
        sayName(){
            console.log(`我叫：${this.name}`)
        },
        sing(){
            console.log("唱歌")
        },
        dance(){
            console.log("跳舞")
        }
    }

    //实例
    let person1=new Person("张三",18)
    let person2=new Person("李四",25)

    person1.sayName()
    person2.sayName()

    person1.sing()
    person2.dance()

    console.dir(Person)
</script>
</body>
</html>

在这里插入图片描述

对象原型

构造函数可以创建实例对象，构造函数还有一个原型对象，一些公共的属性或者方法放到这个原型对象身上
但是为啥实例对象可以访问原型对象里面的属性和方法呢？
在这里插入图片描述
对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。

new 构造函数 => 实例
[[prototype]] → 构造函数的原型对象 prototype

每次调用构造函数创建一个新实例，这个实例的内部[[Prototype]]指针就会被赋值为构造函数的原型对象,脚本中没有访问这个[[Prototype]]特性的标准方式，但 Firefox、Safari 和 Chrome会在每个对象上暴露__proto__属性，通过这个属性可以访问对象的原型

所以，我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在
对象原型指向原型对象
在这里插入图片描述

function Person() {
}

console.log(typeof Person.prototype)

let person = new Person()
let person2 = new Person()
console.log(person.__proto__ === Person.prototype) // true
console.log(person.__proto__.constructor === Person) // true
console.log(person.__proto__ === person2.__proto__) // true

请添加图片描述

VillanelleS

关注

22
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础3之面向对象关于面向过程、函数式编程、对比、构造函数、原型

所有的数据和方法都被封装在对象内，由开发者自己选择性的去公开哪些属性和方法，对于创建的实例来说他能访问的只能是这些公开的属性和方法，而对于其他对象来说是无权访问此类或者进行更改，封装这一特性为程序提供了更高的安全性。对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__proto__原型的存在。所以，我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有。
复制链接

扫一扫