JavaScript笔记-面向对象编程

注意：本篇学习笔记基于原网站： JavaScript教程 - 廖雪峰的官方网站
笔记仅作学习留档使用

本篇目录

创建对象
原型继承
class(ES6)

JavaScript不区分类和实例的概念，而是通过原型（prototype）来实现面向对象编程。没有“Class”的概念，所有对象都是实例，所谓继承关系是把一个对象的原型指向另一个对象，以此来实现调用。

let Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

let xiaoming = {
    name: '小明'
};

xiaoming.__proto__ = Student;
xiaoming.name; // '小明'
xiaoming.run(); // 小明 is running...

注意：不要直接用 obj.\_\_proto\_\_ 去改变一个对象的原型，上述代码仅用于演示目的。
Object.create() 方法可以传入一个原型对象，并创建一个基于该原型的新对象，但是新对象什么属性都没有，因此，我们可以编写一个函数来创建

// 原型对象:
let Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
    // 基于Student原型创建一个新对象:
    let s = Object.create(Student);
    // 初始化新对象:
    s.name = name;
    return s;
}

let xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true

创建对象

JavaScript中，存在的对象都有一个原型，即它的原型对象。使用 obj.对象 访问其属性时，先访问对象本身，若没有找到，就去其原型对象上找，没有就重复以上操作直到上溯到 Object.prototype 对象，这也没找到的话就返回 undefined，以Array的原型链为例：

flowchart TD arr --> Array.prototype --> Object.prototype --> null

Array.prototype 定义了 indexOf()、 shift() 等方法，因此你可以在所有的 Array 对象上直接调用这些方法。
注意：如果原型链太长，访问时间就会变长影响效率

构造函数

创建一个构造函数并使用 new 调用，可以创建一个新对象，创建的对象还从原型上获得了一个 constructor 属性，它指向构造函数本身：

function Student(name) {
    this.name = name;
    this.hello = function () {
        alert('Hello, ' + this.name + '!');
    }
}
// 调用
let xiaoming = new Student('小明');
xiaoming.name; // '小明'
xiaoming.hello(); // Hello, 小明!

// constructor属性
xiaoming.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true
Object.getPrototypeOf(xiaoming) === Student.prototype; // true
xiaoming instanceof Student; // true

在JavaScript中，对于一个函数，如果在调用时使用 new，它就变成一个构造函数，绑定的 this 指向新创建对象，并默认返回 this 。在上述代码中， xiaoming 的原型指向函数 Student 的原型（如果之后创建新的也一样）。
关系图如下，其中红色是原型链：

graph TD A[xiaoming - name - hello] --> C[某个对象 -constructor] B[xiaohong - name - hello] --> C C --> D[Student -prototype] D --> C C --> E[Object.prototype] E --> F[null] %% 设置红色主线 linkStyle 0 stroke:red,stroke-width:2px,color:red; linkStyle 1 stroke:red,stroke-width:2px,color:red; linkStyle 4 stroke:red,stroke-width:2px,color:red; linkStyle 5 stroke:red,stroke-width:2px,color:red; %% 非主线保持黑色 linkStyle 2 stroke:black,stroke-width:1px,color:black; linkStyle 3 stroke:black,stroke-width:1px,color:black;

ps. xiaoming、 xiaohong 这些对象可没有 prototype 这个属性，不过可以用 \_\_proto\_\_ 这个非标准用法来查看。
在上面的情况下， xiaoming 和 xiaohong 各自的 hello 是两个不同的函数（虽然长得一样）；为了节省内存，可以将hello函数移动到共同原型上：

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

new

new 在创建对象时很重要，如果忘记写：

strict模式下， this.name = name 将报错（ this 绑定为 undefined）
非strict模式下， this 绑定为 window，于是创建了全局变量 name，并且返回 undefined

可以提前创建函数用于封装 new 操作：

function Student(props) {
    this.name = props.name || '匿名'; // 默认值为'匿名'
    this.grade = props.grade || 1; // 默认值为1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

// 封装new
function createStudent(props) {
    return new Student(props || {})
}
// 效果
let xiaoming = createStudent({
    name: '小明'
});
xiaoming.grade; // 1

原型继承

JavaScript由于采用原型继承，无法直接扩展一个Class（因为根本不存在Class这种类型），可以使用call（绑定this）+空函数（中间对象连接原型链）来扩展：

// PrimaryStudent（后称PStudent）构造函数:
function PrimaryStudent(props) {
    // 调用Student构造函数，绑定this变量:
    Student.call(this, props);
    this.grade = props.grade || 1;
}

// 空函数F:
function F() {}
// 把F的原型指向Student.prototype:
F.prototype = Student.prototype;

// 把PStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:
PrimaryStudent.prototype = new F();

// 把PStudent原型的构造函数修复为PStudent:
PrimaryStudent.prototype.constructor = PrimaryStudent;

// 继续在PStudent原型（就是new F()对象）上定义方法：
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

// 创建xiaoming:
let xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // 2

// 验证原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true
// 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

对这段代码的详细解释（原博没写但我一开始没懂所以写一下）：

//创建普通实例是这样
let xiaoming = new PrimaryStudent(....)
// 用 new 创建的对象作为原型:
PrimaryStudent.prototype = new F()

为什么这里可以直接使用 .prototype = new 函数（）？
理论上当我们执行 a = new 函数b() 时，JavaScript处理流程：

function b() { /* 构造函数体 */ }

// 内部处理：
let newObj = {};  // 1. 创建一个新空对象
newObj.__proto__ = b.prototype;  // 2. 设置它的原型链
b.call(newObj);  // 3. 执行b 函数，把newObj作为 this
return newObj;  // 4. 返回这个对象

所以返回的对象是一个普通对象,对于这个对象，根据需要创建的对象不同，情况如下：

创建普通实例

let xiaoming = new Student("小明");
// xiaoming.__proto__ === Student.prototype
// xiaoming 是实例

用 new 创建的对象作为原型

/*用 new 创建的对象作为原型*/
function F() {}  // 空函数
F.prototype = Student.prototype;  // 让F的原型指向Student的原型

// 创建F的实例（这里就和创建普通实例一样）
let tempObj = new F();
// tempObj.__proto__ === Student.prototype
// tempObj 现在是一个普通对象，和任何new创建的对象没区别

/*关键一步：把它赋值给另一个构造函数的prototype*/
function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
}
PrimaryStudent.prototype = tempObj;  // 看！一个普通对象成为了原型
// 现在 PrimaryStudent.prototype === tempObj

顺便可以封装继承函数，隐藏 F 的定义，并简化代码

function inherits(Child, Parent) {
    let F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

// 用法

// 实现原型继承链:
inherits(PrimaryStudent, Student);

// 绑定其他方法到PrimaryStudent原型:
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

对应原型链：

class(ES6)

class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}
let xiaoming = new Student('小明');
xiaoming.hello();

class 的定义包含了构造函数 constructor 和定义在原型对象上的函数 hello()（注意没有 function 关键字），这样就避免了 Student.prototype.hello = function () {...} 这样分散的代码。

class继承

class可以通过extends实现派生

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // super调用父类的构造方法
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}

posted @ 2025-12-26 15:14 qiqimk 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部