JS 学习笔记 (七) 面向对象编程OOP
本文最后更新于 741 天前,其中的信息可能已经有所发展或是发生改变。

1、前言

创建对象有很多种方法,最常见的是字面量创建和new Object()创建。但是在需要创建多个相同结构的对象时,这两种方法就不太方便了。

如:创建多个学生信息的对象

let tom = {
    name: "Tom",
    age: 20,
    sex: "boy",
    height: 175
};

let marry = {
    name: "Marry",
    age: 22,
    sex: "girl",
    height: 165
}

2、对象工厂

2.1 实例

使用对象工厂改进上述代码,如:

function person(name, age, sex, height) {
    return {
        name, age, sex, height
    }
}
let tom = new person("Tom", 20, "boy", 175)
let marry = new person("Marry", 22, "girl", 165)
console.log(tom);
console.log(marry);

打印出结果:
{ name: ‘Tom’, age: 20, sex: ‘boy’, height: 175 }
{ name: ‘Marry’, age: 22, sex: ‘girl’, height: 165 }

对象工厂函数创建返回的是一个新对象。

2.2 缺陷以及解决方法

  • 对象工厂本身是一个普通函数,用于表达对象结构时,描述性不强
  • 对象工厂没有解决对象标识的问题,即创建的对象是什么类型。
  • 利用构造函数可以解决这些问题

3、构造函数

3.1 实例详解

更改上面的代码,并添加一个say函数:

function person(name, age, sex, height) {
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.height = height;
    this.say = function(){
        console.log(`你好,我是${this.name}`);
    }
}
let tom = new person("Tom", 20, "boy", 175)
let marry = new person("Marry", 22, "girl", 165)
tom.say()
marry.say()

打印出结果:
你好,我是Tom
你好,我是Marry

其中,代码中的this是对new Person的空对象进行扩展。
每个对象都具有constructor属性,用于标识对象的“类型”,如:

console.log(Tom.constructor == Person); // true
console.log(Tom.constructor == Object); // false

若要判tom和marry对象的类型,推荐使用instanceof方法。如:

// 使用instanceof方法判断对象类型
console.log(Tom instanceof Person); // true
console.log(Tom instanceof Object); // true

但是这个解决方法还是有一些缺陷。

// 判断实例所对应的方法是否相同
console.log(Tom.say == Jerry.say); // false

输出是false的原因是因为同一个构造函数的实例都会创建一个自己的方法。这样可能会极大的增加的内存的负荷。而且,同一个方法应该是完成相同的任务,没有必要创建多个相同的方法。

我们可能会想到的解决方案是将它的say()方法提取出来,如:

function Person(name, age, sex, height) {
   this.name = name;
   this.age = age;
   this.sex = sex;
   this.height = height;
}
function say() {
    console.log(`你好,我是${this.name}`);
}
let tom = new person("Tom", 20, "boy", 175)
let marry = new person("Marry", 22, "girl", 165)
tom.say()
marry.say()

输出结果:
你好,我是Tom
你好,我是Marry

这样处理的好处就是say()方法不会被多次创建,但会产生一定的问题。即:
say() 为全局函数,会导致作用域混乱。而且只有Person创建的对象才能调用该方法,由于该方法是放在全局的,可能会产生内存泄漏,会让全局的函数更加臃肿。

解决方法:
利用原型模式,将方法定义在构造函数的原型对象上,可以解决这个问题

  • 每个函数都有一个prototype属性,指向一个对象。
    该对象包含应该由特定引用类型的实例共享的属性和方法。
    该对象就是通过调用构造函数创建的对象的原型。

看下列代码:

function Person(name, age) {
    this.name = name
    this.age = age
}
Person.prototype.say = function () {
    console.log(`你好,我是${this.name}`);
}

let Tom = new Person("Tom", 12)
Tom.say()
let Marry= new Person("Jerry", 10)
Marry.say()
console.log(Tom.say == Marry.say);  // true

输出结果:
你好,我是Tom
你好,我是Marry

若要对person的原型进行属性扩展,可直接使用Person.prototype。因为当在构造函数原型上创建属性(或方法)时,会被改构造函数的额所有对象所共享。如:

Person.prototype.from = "China"
console.log(Tom.from); // China
console.log(Marry.from); // China

若Marry对象本身有from属性,则继承自Person的from就不起作用了(原型的from属性被屏蔽掉了),起作用的是Marry自身的from属性,如:

Marry.from = "America"
console.log(Tom.from); // China
console.log(Marry.from); // America

若要判断对象的原型,对象原型的构造函数,可枚举的属性:

console.log(Object.keys(Marry)); // 可枚举的自身的属性 [ 'name', 'age' ]
console.log("from" in Marry); // 可枚举的自身的属性和继承的属性  true 
console.log(Object.getOwnPropertyNames(Marry)); // 可枚举的自身的属性 [ 'name', 'age' ]
console.log(Object.getPrototypeOf(Marry).constructor == Person); // true

3.2 基本原理总结

  • 在内存中创建一个新对象。
  • 这个新对象内部的[[Prototype]]特性被赋值为构造函数的prototype属性。
  • 构造函数内部的this被赋值为这个新对象(即this指向新对象)。
  • 执行构造函数内部的代码(给新对象添加属性)。
  • 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。

4、原型继承

4.1 概要

  • 利用构造函数构建对象结构(模板,近似于类),从语义上较为清晰的表达对象结构。
  • 利用构造函数原型扩展,能方便的为该构造函数所创建的对象进行基于原型的扩展。
  • 利用构造函数还可以进行基于原型对象的继承

4.2 构造函数、原型和实例的关系

  • 每个构造函数都有一个原型对象。
  • 原型有一个属性指回构造函数
  • 实例有一个内部指针[[Prototype]]指向原型。

4.3 原型链

当对象原型是另一个构造函数的实例,如此迭代,形成了一连串的继承关系,即为原型链。原型链表达了对象与对象之间的继承关系。

举个例子:

function Person(name, age) {
    this.name = name
    this.age = age
}
let Marry = new Person("Marry", 10)
console.log(Marry instanceof Person); // true
console.log(Marry instanceof Object); // true
console.log(Object.getPrototypeOf(Marry)); // {}
console.log(Object.getPrototypeOf(Object.getPrototypeOf(Marry))); // [Object: null prototype] {}

4.4 原型链的问题

function Animal() {
    this.colors = ["white", "black"];
}
function Mouse(name, age) {
    this.name = name;
    this.age = age;
}
Mouse.prototype = new Animal();
let m1 = new Mouse("Mickey", 10);
console.log(m1.name, m1.colors);
m1.colors.push("red");
let m2 = new Mouse("Miney", 9);
console.log(m2.colors);

输出结果:
Mickey [ ‘white’, ‘black’ ]
[ ‘white’, ‘black’, ‘red’ ]

这是因为当原型中包含引用值,在实例件共享的是该引用值的引用,当修改实例中的该属性时,会影响全部实例。

存在的问题:子类型在实例化时不能给父类型传递参数。
解决方案:盗用构造函数

4.5 盗用构造函数

在子类构造函数中调用父类构造函数,并将子类当前实例只定为构造函数的上下文。

function Animal(type) {
    this.colors = ["white", "black"];
    this.type = type
}
function Mouse(name, age, type = "Mouse") {
    Animal.call(this, type) // 父类构造函数"盗用"(仅仅把Animal当做普通函数调用)
    this.name = name;
    this.age = age;
}
Mouse.prototype = new Animal()
let m1 = new Mouse("Mickey", 20)
m1.colors.push("red")
console.log(m1.name, m1.colors);
let m2 = new Mouse("Miney", 18)
console.log(m2.name, m2.colors);

console.log(m1 instanceof Mouse);
console.log(m1 instanceof Animal);

输出结果:
Mickey [ ‘white’, ‘black’, ‘red’ ]
Miney [ ‘white’, ‘black’ ]
true
true

存在的问题:
无法访问父类原型上的方法,或者说是没有父类
解决方法:
将原型链与盗用构造函数结合起来

4.6 原型链与盗用构造函数的组合

将两者优点集中起来,如:

function Animal(type) {
    this.colors = ["white", "black"];
    this.type = type
}
Animal.prototype.show = function () {
    console.log(this.type, this.colors); // Mouse [ 'white', 'black', 'red' ]
}
function Mouse(name, age, type = "Mouse") {
    Animal.call(this, type) // 父类构造函数“盗用”,解决传参问题
    this.name = name;
    this.age = age;
}
Mouse.prototype = new Animal()  // 强制指定原型对象,表达继承关系
let m1 = new Mouse("Mickey", 20)
m1.colors.push("red")
console.log(m1.name, m1.colors); // Mickey [ 'white', 'black', 'red' ]
m1.show() // 通过原型继承获取

let m2 = new Mouse("Miney", 18)
console.log(m2.name, m2.colors); // Miney [ 'white', 'black' ]
m2.show()
console.log(Object.keys(m1));// [ 'colors', 'type', 'name', 'age' ]

存在的问题:

console.log(m1 instanceof Mouse); // false
console.log(m1 instanceof Animal);// true

构造函数的指向不正确,问题在于Mouse.prototype = new Animal(),将构造函数指向了Animal

解决方法:强制指定构造函数的指向为原型构造函数

Mouse.prototype.constructor = Mouse
console.log(m1.constructor == Mouse); // true
console.log(m1 instanceof Mouse); // true

4、类

4.1 概述

  • ECMAScript 6 新引入的 class 关键字具有正式定义类的能力。
  • 类( class)是ECMAScript 中新的基础性语法糖结构
  • 虽然 ECMAScript 6 类表面上看起来可以支持正式的面向对象编程,但实际上它背后使用的仍然是原型和构造函数的概念

4.2 实例一

  • [ ] 要求:
  • 使用ES5实现
  • 创建一个Person类,其中实例属性包括:姓名name,年龄age。
  • 创建一个数组people,向该列表中存入4个Person的实例 按照年龄升序对people列表进行排序,显示排序后的姓名和年龄。
  • 为Person类添加一个方法setAttr(attr, value),可以动态的为Person类的实例添加属性和属性值。**
function Person(name, age) {
    this.name = name;
    this.age = age
}
// 在Person的原型上复写toString方法
Person.prototype.toString = function () {
    return `${this.name}:${this.age}`
}
// 在Person的原型上定义setAttr方法
Person.prototype.setAttr = function (attr, value) {
    this[attr] = value
}
let people = [];
// 定义people空数组,实例化4个Person对象,并添加到people数组中
let p1 = new Person("tom", 20)
let p2 = new Person("henry", 19)
let p3 = new Person("mark", 21)
let p4 = new Person("jeorge", 23)
people.push(p1, p2, p3, p4)
// 对people数组的age属性的值从大到小的排序
people.sort((a, b) => a.age - b.age)
console.log(people);
// 输出每个实例的name和age组成的语句
people.forEach((item) => console.log(item.toString()))
// 给第一个实例添加gender属性并赋值
people[0].setAttr("gender", "Male")
console.log(people[0]);
// 输出第二个实例化对象与第一个对象进行比较,看添加gender属性是否成功
console.log(people[1]);

输出结果:
[
Person { name: ‘henry’, age: 19 },
Person { name: ‘tom’, age: 20 },
Person { name: ‘mark’, age: 21 },
Person { name: ‘jeorge’, age: 23 }
]
henry:19
tom:20
mark:21
jeorge:23
Person { name: ‘henry’, age: 19, gender: ‘Male’ }
Person { name: ‘tom’, age: 20 }

4.2 实例二

  • [ ] 要求:
  • 使用ES6实现实例一的功能
    // 定义一个Person类
    class Person {
    // 在Person类里面定义的constructor构造函数,并传入参数name,age
    constructor(name, age) {
    // 定义name属性和age属性,并把传入的值赋给它
        this.name = name;
        this.age = age
    };
    // 定义的toString方法
    toString() {
    // 直接返回name和age的属性值
        return `${this.name}:${this.age}`
    };
    // 定义setAttr方法,传入参数attr和value,表示属性和属性值
    setAttr(attr, value) {
    // 给当前的attr属性赋value值
        this[attr] = value
    }
    }
    let people = [
    new Person("tom", 20),
    new Person("henry", 19),
    new Person("mark", 21),
    new Person("jeorge", 23)
    ];
    // 从大到小排序
    people.sort((a, b) => a.age - b.age)
    console.log(people);
    // 返回每个实例的toString方法return的值
    people.forEach((item) => console.log(item.toString()))
    // 给第一个person实例对象添加gender属性并赋Male值
    people[0].setAttr("gender", "Male")
    // 打印出添加gender属性后的实例和未添加的实例进行比较
    console.log(people[0]);
    console.log(people[1]);

    输出结果:
    [
    Person { name: ‘henry’, age: 19 },
    Person { name: ‘tom’, age: 20 },
    Person { name: ‘mark’, age: 21 },
    Person { name: ‘jeorge’, age: 23 }
    ]
    henry:19
    tom:20
    mark:21
    jeorge:23
    Person { name: ‘henry’, age: 19, gender: ‘Male’ }
    Person { name: ‘tom’, age: 20 }

4.3 实例三

  • [ ] 要求:
  • 使用ES6实现,在 实例二 Person类的基础上,编写以下两个类继承自Person。
  • Teacher类除了具有Person类的姓名和性别,还具有一个“课程”course属性。
  • Student类除了具有Person类的姓名和性别,还具有一个“分数”score属性
  • 通过代码分析一个Teacher实例与Person类、Teacher类、Student类以及object之间的关系
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    };
    toString() {
        return `${this.name}:${this.age}`
    }
}

// 这里实现Teacher子类继承Person父类
class Teacher extends Person {
    constructor(name, age, course) {
    // super 子类Teacher调用父类Person的属性
        super(name,age)
        // 添加course属性
        this.course = course
    }
}
// 实例化一个Teacher对象
let Liming = new Teacher("Liming",22,"语文")
console.log(Liming);
// 这里实现Student子类继承Person父类
class Student extends Person{
    constructor(name, age, score) {
    // super 子类Student调用父类Person的属性
        super(name,age)
        // 添加score属性
        this.score = score
    }
}
// 实例化一个Student对象
let Tom = new Student("Tom",22,100)
console.log(Tom);

// 判断Tom 是否是Student的实例
console.log(Tom instanceof Student);
console.log(Tom instanceof Person);
console.log(Tom instanceof Object);

// 判断实例化对象Liming和Tom的原型对象
console.log(Object.getPrototypeOf(Liming));
console.log(Object.getPrototypeOf(Tom));

// 判断Student类和Teacher类的原型对象
console.log(Object.getPrototypeOf(Student));
console.log(Object.getPrototypeOf(Teacher));

输出结果:
Teacher { name: ‘Liming’, age: 22, course: ‘语文’ }
Student { name: ‘Tom’, age: 22, score: 100 }
true
true
true
Person {}
Person {}
[class Person]
[class Person]

4.4 实例四

  • [ ] 要求
  • 使用ES6实现,在 实例3 中Student类的基础上进行修改。
    • 为Student类添加属性grade,用于表示该学生实例的年级(如:Grade One等)。
    • 为学生实例的grade属性赋值时,能自动的将输入的信息转换为所有字母大写进行保存在对象中。
    • 读取学生实例的grade属性时,如果该属性没有信息,则返回“NO GRADE”。

解法一:

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age
    }
}

class Student extends Person {
    constructor(name, age, score) {
        super(name, age)
        this.score = score;
    };
    // 存取器属性取出数据,若没有则显示NO GRADE
    get grade() {
        return this.__level || "NO GRADE"
    };
    // 存取器属性存入数据,并转为大写
    set grade(value) {
        this.__level = value.toUpperCase()
    }
}
let Tom = new Student("Tom", 22, 100)
let Jerry = new Student("Jerry", 22, 100)
Tom.grade = "grade one"
console.log(Tom.grade);
console.log(Jerry.grade);

输出结果:
GRADE ONE
NO GRADE

解法二:

// 在es5构造函数中定义存储器方法
let Person = function(){
    return function(name,age){
        this.name = name;
        this.age = age;
    }
}
class Students extends Person(){
    #gd; //实例私有字段
    constructor(name,age,score){
        super(name,age)
        this.score = score
    }
    get grade(){
        return this.#gd || "No GRADES"
    }
    set grade(value){
        this.#gd = value.toUpperCase().trim()
    }
}
let p1 = new Person("Jerry",20)
let p2 = new Person("Jerry")
p1.grade = "abc"
console.log(p1);
console.log(p2);

输出:
[Function (anonymous)] { grade: ‘abc’ }
[Function (anonymous)]

本文链接:https://likepoems.com/articles/js-learning-notes-for-oop/
转载说明:本站文章若无特别说明,皆为原创,转载请注明来源:likepoems,谢谢!^^
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇