面向对象

最新推荐文章于 2025-09-06 08:16:31 发布

原创最新推荐文章于 2025-09-06 08:16:31 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#面向对象

前端专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了面向对象编程(OOP)的核心概念，包括封装、继承、多态等特性，并详细解析了JavaScript中的对象分类、原型对象及其实现机制，如__proto__属性、prototype属性、构造函数和实例之间的关系。

面向对象

（1）概述

面向对象程序设计，英语全称Object Oriented Programming,简称OOP。

（2）特征

封装、继承、多态

类：类是对象的概括，而对象是对类的一种具体实现

对象分类

ES6之前分为：原生对象和宿主对象

js内置对象：

String、Number、Boolean、Array、Function、Json、Math、Date、Object、 RegExp、Error、全局对象

原型对象

1、JavaScript 中每个对象都有一个原型对象，可以通过__proto__属性来访问都对象的原型对象
2、通过 __proto__属性一直往上找原型对象的话，最终会找到 null
3、构造函数的prototype属性指向一个对象，这个对象是该构造函数实例化出来的对象的原型对象。
4、JavaScript中的根对象是Object . prototype对象。object. prototype对象是一个空对象
5、JavaScript中的每一个对象，都是从object. prototype对象克隆而来的。Object. prototype对象就是它们的原型。而Object. prototype对象的原型为null。

原型相关方法

prototype 和__proto__
prototype 是构造函数上面的一个属性，指向一个对象，这个对象是该构造函数实例化出来的对象的原型对象。实例化出来的对象可以通过_proto_ 来找到自己的原型对象。如下:

const arr = [1,2,3,4,5];
console.log(Array.prototype); // []
console.log(arr.__proto__); // []
console.log(Array.prototype === arr.__proto__); // true

Object.getPrototypeOf()方法
除了上面介绍的通过__ proto__ 来找到对象的原型对象以外，也可以通过object.getPrototype0f()方法来查找一个对象的原型对象。如下:

let arr = [1,2,3,4,5]
console.log(Object.getPrototypeOf(arr)); // []
console.log(arr.__proto__); // []
console.log(Object.getPrototypeOf(arr) === arr.__proto__); // true

constructor 属性
通过constructor属性，我们可以查看到一一个对象的构造函数是什么。换句话说，就是这个对象是如何得来的，如下:

const arr = [1,2,3,4,5];
console.log(arr.constructor); // [Function: Array]

instanceof 操作符
判断一个对象是否是-个构造函数的实例。如果是返回true,否则就返回false,如下:

const arr = [1,2,3,4,5];
console.log(arr instanceof Array); // true
console.log(arr instanceof Number); // false

isPrototypeOf() 方法
该方法将会返回一个布尔值，主要用于检测一个对象是否是一个实例对象的原型对象。如下:

const arr = [1,2,3,4,5];
console.log(Array.prototype.isPrototypeOf(arr)); // true
console.log(arr.__proto__.isPrototypeOf(arr)); // true

hasOwnProperty() 方法
判断一个属性是定义在对象本身.上面还是从原型对象上面继承而来的。如果是本身的，则返回true，如果是继承而来的，则返回false,如下:

const person = {
 arms: 2,
 legs: 2,
}
const zhangsan= Object.create(person, {
 name: {
 value: "zhangsan",
 writable: false,
 enumerable: true
 },
 age: {
 value: 18,
 enumerable: false
 }
});
console.log(zhangsan.hasOwnProperty("name")); // true
console.log(zhangsan.hasOwnProperty("age")); // true
console.log(zhangsan.hasOwnProperty("arms")); // false
console.log(zhangsan.hasOwnProperty("legs")); // false