面向对象初识（JS相关）篇

believealone

于 2020-12-09 08:26:32 发布

阅读量72

点赞数

分类专栏： JS 学习笔记

本文链接：https://blog.csdn.net/believealone/article/details/110914958

版权

JS 学习笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

本文介绍了面向对象编程的基本概念，对比了面向过程和面向对象的区别，并通过例子阐述了面向对象的思维方式。接着，文章讲解了面向对象的两个核心概念——类和对象，以及如何在JavaScript中创建对象，包括使用字面量语法和构造函数的方式。同时，提到了在JS ES6之前没有类的概念，只有对象的概念。

摘要由CSDN通过智能技术生成

面向对象

面向过程和面向对象对比

面向过程编程(OPP): 以事件为中心, 侧重于完成整个需求所需的步骤

代表语言:C语言
面向对象编程(OOP): 以事物为中心, 侧重于完成整个需求的事物的特征和行为

代表语言: Java, Objective-C, C++
举例：把大象装冰箱

面向过程的思路：
1. 把冰箱门打开
2. 把大象装进去
3. 把冰箱门关上
面向对象的思路：

大象:(特征/属性:重量, 尺寸… ;行为/方法:走, 吃, 睡, 跑, 打架… )

冰箱:(特征/属性:品牌, 价格, 颜色, 功率, 尺寸…; 行为/方法: 制冷, 保鲜…)

人:(特征/属性: 姓名, 性别, 年龄, 籍贯…; 行为/方法: 说话, 睡觉, 装大象…)

面向对象

面向对象的编程语言里的两个基础概念: 类和对象
1. 类: 具有相同特征和行为的事物的抽象.
2. 对象: 是类的实例
3. 类是对象的模板, 对象是类的实例
类是如何抽象出来的?

例：描述一个汽车

汽车：
1. 特征：
  
  a汽车：大灯, 轮子, 刹车, 门, 排气, 雨刷, 挡风玻璃, 后背箱…
  
  b汽车：大灯, 轮子, 刹车, 门, 排气, 雨刷, 挡风玻璃…
  
  c汽车：…
2. 汽车的行为：
  
  a车：加速, 刹车, 漂移…
  
  b车：加速，启动，刹车…
  
  c车：…
最终：
1. 特性：特性: 大灯, 轮子, 刹车, 门, 排气, 雨刷, 挡风玻璃…
2. 行为：加速, 刹车…
具有以上特征和行为的就叫汽车，如此取其共同的本质的属性，就抽象出了一个汽车类。
JS ES6之前, 是没有类的概念的, 只有对象的概念

JS 创建对象

语法糖(字面量)创建对象

语法:

var 对象名 = {

属性名1:属性值1,

属性名2:属性值2,

…

方法名1:function(){},

方法名2:function(){},

…

};

注：

属性值可以是任意数据类型
对象里的方法名代替函数名行驶作用

//创建一个学生对象
//属性: 姓名, 性别, 年龄, 学校, 专业, 所上课程, 朋友
//方法: 上课, 做作业, 考试
var stu1 = {
    //属性
    name:"张三",
    age:20,
    sex:"男",
    school:"中北大学",
    major:"软件工程",
    classes:["C语言", "高数", "英语"],
    friend: {
        name:"李四",
        age:22,
        sex:"男",
        sayHi:function(){
            console.log("你好!我叫"+this.name);
        }
    },
    // 方法
    goToClass:function(){
        console.log("上课");
    },
    exam: function(){
        console.log("考试");
    },
    doHomework: function(){
        console.log("做作业");
    },
    sayHello:function(){
        console.log("hi, 我叫" + this.name);
    }
};

操作对象：

语法：

对象名.属性名

对象名.方法名()

console.log(stu1.name);
stu1.doHomework();

console.log(stu1.friend.name);
stu1.friend.sayHi();

stu1.age = 18;
console.log(stu1);

stu1.goToClass();
stu1.friend.sayHi();
stu1.sayHello();

**注：**语法糖创建对象的语法, 不适用于创建大量对象样本, 工厂模式

function createStu(name, age, sex, major, sayHi) {
    var stu = {
        name:name,
        age:age,
        sex:sex,
        major:major,
        abc:sayHi
    }
    return stu;
}

var stu1 = createStu("张三", 20, "男", "软件工程", function(){
    console.log("你好, 我叫" + this.name + ", 我是" + this.major + "专业的"); 
});
stu1.abc();
var stu2 = createStu("李四", 19, "女", "外语", function(){
    console.log("你好, 我叫" + this.name + ", 我是" + this.major + "专业的"); 
});
stu2.abc();

构造函数创建对象

ES5 构造函数 == 面向对象的类

构造函数的特点：

函数名首字母大写
在调用的时候不是直接调用而是需要new关键字

function Student(name, age, sex) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function(){
        console.log("你好, 我叫" + this.name + ", 今年" + this.age + "岁了!");
    }
}
var stu1 = new Student("张三", 20, "男");
console.log(stu1);

new关键字的作用
1. 创建一个空对象 var obj = {};
2. 设置原型链(将空对象的 __ proto __ 属性设置成构造函数的原型对象)
  
  obj. __ proto __ = Student.prototype
3. 调用构造函数给空对象赋值(改变this的指向给obj赋值) Student.call(obj)
4. 赋值完成之后, 将创建好的对象返回出函数 return obj