SAP Fiori开发中的JavaScript基础知识15 - 原型，object，constructor，class，继承

news2024/12/22 4:26:13

1. 前言

本文将介绍JavaScript中的核心概念 - 原型，并会介绍基于原型的应用场景object，constructor，class，继承。

本文会将这几个核心概念汇总在一篇博客中，因为这些概念是触类旁通的，希望对你有帮助。

2.原型

2.1 原型的概念

在JavaScript中，几乎所有的东西都是对象，每个对象都有一个特殊的内部属性（一个引用类型）叫做prototype原型。

原型本身也是一个对象，它包含了可以由特定类型的所有实例共享的属性和方法。换句话说，你可以把原型想象成一个用于定义行为的模板，所有的对象实例都可以访问它的属性和方法。

当我们试图访问一个对象的属性，如果对象本身没有这个属性，那么JavaScript就会去它的prototype对象上找这个属性，这个过程叫做原型链查找。

JavaScript中每个对象都一个accessor property（访问属性）__ proto __，访问属性暴露了内部的原型对象[[Prototype]]。

let person = { name : 'John' };
console.log(obj.__proto__ === Object.prototype); // 输出: true

在这里插入图片描述

2.2 Object 原型对象

JavaScript中所有的对象都派生于Object对象，Object对象的属性和方法会被自动继承，也可以被覆盖。

在上例中，我们创建了一个对象person，这个对象也会默认都是从Object.prototype继承的，所以obj.__proto__就是Object.prototype。

Object.prototype本身也有一些有用的方法，例如toString(), isPrototypeOf(), hasOwnProperty(), valueOf()等。这些方法可以被所有的对象实例使用。

let person = {name: 'John'};
console.log(person.hasOwnProperty('name')); // 输出: true
console.log(person.hasOwnProperty('age')); // 输出: false

在这个例子中，我们使用了Object.prototype的hasOwnProperty()方法来检查obj是否有name和age属性。

你也可以向原型中添加新的属性或方法，这样所有的对象实例都可以使用它们。

Object.prototype.sayHello = function() {
    console.log('Hello, World!');
}

let person = {};
person.sayHello(); // 输出: 'Hello, World!'

在这个例子中，我们向Object.prototype添加了一个新的方法sayHello()。然后，我们创建了一个新的对象person，并调用了sayHello()方法。尽管obj本身没有sayHello()方法，但它可以通过原型链访问到Object.prototype的sayHello()方法。

需要注意的是，虽然向Object.prototype添加属性或方法可以被所有对象访问，但不要这样做！！！
因为它可能会与现有的属性或方法冲突。
更好的做法是直接在你自己的构造函数的原型上添加属性或方法。

2.3 基于原型创建对象

尝试基于原型创建对象时，不要直接使用.__proto__去访问原型对象, 因为它在不同的JavaScript引擎中可能有不同的行为。

let person = { name : 'John' };
let employee = { };
employee.__proto__ = person;     // do NOT use this way
console.log(employee.name);

推荐的做法是使用 Object.getPrototypeOf() 和 Object.setPrototypeOf() 来获取和设置原型，或者使用 Object.create() 来创建一个新对象并设置其原型。

如下例，Object.create方法将.__proto__设置成person，并继承了相应的属性name。

let person = { name : 'John' };
let newEmployee = Object.create(person);
console.log(newEmployee.name);   // 输出：John

在这里插入图片描述

当父对象的属性变更时，子对象也会拿到相应的变更（继承）。

let person = { name : 'John' };
let newEmployee = Object.create(person);
console.log(newEmployee.name);   // 输出：John

person.age = 24;
console.log(newEmployee.age);    // 输出：24

在这里插入图片描述

此时，我们打印person对象和newEmployee对象，可以发现newEmployee的原型链，使用newEmployee.age和newEmployee.name其实访问的是newEmployee对象原型上面的属性age和name，而非newEmployee对象本身的age和name。

let person = { name : 'John' };
let newEmployee = Object.create(person);
console.log(newEmployee.name);   // 输出：John

person.age = 24;
console.log(newEmployee.age);    // 输出：24

console.log(person);       // 输出：{ name: 'John', age: 24 }
console.log(newEmployee);  //输出：{}

原型的这种特性，实现了继承的效果，也即当子对象的属性发生变更时，也不会反映到父对象上。因为变更的是newEmployee对象上的属性，原型上父对象的属性未变更。

例如下例中，变更newEmployee的name属性，并非变更了newEmployee原型上的name属性。理解这一点，非常重要。

let person = { name : 'John' };
let newEmployee = Object.create(person);
console.log(newEmployee.name);   // 输出：John

person.age = 24;
console.log(newEmployee.age);    // 输出：24

newEmployee.name = 'Tim';
console.log(person.name);        // 输出：John
console.log(newEmployee.name);   // 输出：Tim
console.log(newEmployee);        //输出：{ name: 'Tim' }

在这里插入图片描述

通过 Object.getPrototypeOf() 方法，可以得到给定对象的原型对象。

let person = { name : 'John' };
let newEmployee = Object.create(person);
console.log(newEmployee.name);   // 输出：John

person.age = 24;
console.log(newEmployee.age);    // 输出：24

newEmployee.name = 'Tim';
console.log(person.name);        // 输出：John
console.log(newEmployee.name);   // 输出：Tim
console.log(newEmployee);        //输出：{ name: 'Tim' }

console.log( Object.getPrototypeOf(newEmployee) ); //输出：{ name: 'John', age: 24 }

小结上例：

  1. 当创建person对象时，其__proto__属性自动指向了Object对象；
  2. 当使用Object.create(）方法基于person对象创建newEmployee对象时，newEmployee对象的__proto__属性指向了person对象
  3. 而person对象的__proto__仍然是指向Object对象。
  4. newEmployee —> person —> Object 形成了原型链。

此外，我们应该避免创建一个原型链过长的对象，因为这会影响属性查找的性能。通常，原型链的长度不应超过3。

2.4 辨析Object.prototype，proto 和[[Prototype]]

至此，让我们一起回顾和辨析下上面的几个概念。

在JavaScript中，每个对象都有一个原型（prototype）。原型是一个对象，它包含了共享的属性和方法，可以被其他对象继承和访问。

  • Object.prototype是所有对象的原型链的顶层。它是JavaScript中所有对象的默认原型。它包含了一些常用的方法，比如toString()和valueOf()。

  • __proto__是每个对象都有的一个属性，它指向该对象的原型。通过__proto__属性，我们可以访问和修改对象的原型。但是需要注意的是，__proto__是非标准的属性，不建议在生产环境中使用。

  • [[Prototype]]是每个对象都有的一个内部属性，它指向该对象的原型。它是JavaScript中实现原型继承的基础。在ES6之前，我们无法直接访问和修改[[Prototype]]属性，但是可以通过__proto__属性来间接操作。在ES6中，可以使用Object.getPrototypeOf()和Object.setPrototypeOf()方法来访问和修改[[Prototype]]属性。

3. Constructor 构造函数

在JavaScript中每个函数都是一个对象，因此函数也有自己的原型对象，这个原型对象就是Function.prototype。

Function.prototype是一个特殊的对象，它包含了一些函数对象特有的方法，例如call( )，apply( )和bind( )，这些方法可以在函数对象上直接调用，用于改变函数的执行上下文或绑定参数。

constructor是函数对象的一个特殊属性，它指向创建该函数对象的构造函数。

注：Function.prototype本身也是一个函数对象，它的构造函数就是Function。

注：Function是继承于Object的，它继承了Object的属性和方法。通过函数的原型链，可以访问到Object.prototype上的方法和属性，比如toString()、hasOwnProperty()等。

见下例，先自定义个函数对象MyFunction，那么它的原型对象是Function.prototype，MyFunction.prototype.constructor将指向MyFunction，而Function.prototype.constructor将指向Function。

这种关系可以用来判断一个对象是否是特定函数的实例，例如，可以通过myObj instanceof MyFunction来判断obj是否是MyFunction的实例。

function MyFunction() {

}

MyFunction.prototype.sayHello = function () { console.log("hello") }; //在原型上， 声明了一个sayHello的匿名函数

let myObj = new MyFunction();                                         // 创建一个MyFunction的实例

console.log(MyFunction);                       // 输出：[Function: MyFunction]
console.log(MyFunction.__proto__);             // 输出： {}
console.log(MyFunction.constructor);           // 输出：[Function: Function]
console.log(MyFunction.prototype);             // 输出：{ sayHello: [Function (anonymous)] }
console.log(MyFunction.prototype.constructor); // 输出：[Function: MyFunction]

console.log(myObj.prototype);                  //输出：undefined；无法直接访问prototype。
console.log(myObj.constructor);                //输出：[Function: MyFunction]，原型链查找，返回MyFuction的constructor
console.log(myObj.constructor === MyFunction); // 输出: true
console.log(myObj.__proto__);                  //输出：{ sayHello: [Function (anonymous)] }
console.log(myObj.__proto__.constructor);      //输出：[Function: MyFunction]
console.log(Object.getPrototypeOf(myObj));     //输出：{ sayHello: [Function (anonymous)] }
console.log(myObj instanceof MyFunction);      //输出：true
myObj.sayHello();                              // 输出: Hello!, 调用MyFunction.prototype上的方法

下图是MyFunction对象：
在这里插入图片描述
下图是myObj对象：
在这里插入图片描述

再进一步研究一下上面的代码，我们可以发现：

console.log(myObj.constructor === MyFunction);                             // [Function: MyFunction]
console.log(myObj.__proto__ === MyFunction.prototype);                     // { sayHello: [Function (anonymous)] }
console.log(MyFunction.prototype.__proto__ === Object.prototype);          // [Object: null prototype] {}
console.log(MyFunction.__proto__ === Object.getPrototypeOf(MyFunction));   // {}
  • myObj.constructor === MyFunction, 是因为myObj对象自身并没有constructor属性，因而触发原型链查找，这个寻找constructor属性的请求被发送到其原型MyFunction上面，MyFunction上面没有constructor属性，查找到MyFunction.prototype.constructor，这个constructor的[Function: MyFunction]。
  • myObj. __proto __ === MyFunction.prototype，通过访问属性__proto__访问到了原型对象，这个原型对象就是其构造函数MyFunction的原型对象，这个原型对象中包含了一个sayHello的函数{ sayHello: [Function (anonymous)] }。
  • MyFunction.prototype. proto __ === Object.prototype，通过访问构造函数MyFunction原型上的访问属性__proto，可以进一步访问到其所指向的基础对象Object的原型（Function对象继承于Object）[Object: null prototype] {}。
  • MyFunction. proto === Object.getPrototypeOf(MyFunction)，这两种方式拿到原型对象的效果是一样的{}。
  • myObj. __proto__指向的对象是MyFunction， MyFunction. __proto__指向的对象是Object;

3.1 constructor与New

constructor的这种特性被用于创建原型链。通过constructor可以同new关键字结合创建新的对象实例。通过new会创建一个新的this上下文对象。new的输入参数，常用于实例化新的对象。


function Car(make, model) {
    this.make = make;
    this.model = model;
}

var myCar = new Car("Toyota", "Camry");
console.log(myCar.make);          // 输出：Toyota
console.log(myCar.model);         // 输出：Camry
console.log(myCar.constructor);   //输出：[Function: Car]

在上面的示例中，我们定义了一个Car构造函数，并通过new关键字创建了一个myCar对象。new关键字会调用Car构造函数，并将构造函数内部的this指向新创建的对象。通过this关键字，我们可以给新创建的对象设置属性。

总结：

  • constructor是一个属性，它指向创建对象的构造函数。
  • new关键字用于创建一个对象实例，它会调用构造函数，并将构造函数内部的this指向新创建的对象。

4. class关键字

在JavaScript中，class关键字是ES6（ECMAScript 2015）引入的一个新特性，用于定义类。它提供了一种更简洁、更面向对象的语法来创建对象和定义类的行为。

在没有class关键字之前，JavaScript使用构造函数和原型链来实现面向对象编程。下面是一个使用旧语法的示例：

// 构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 原型方法
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

// 创建对象
var person1 = new Person("Alice", 25);
person1.sayHello(); // 输出: Hello, my name is Alice

上述代码中，我们使用构造函数Person来创建一个Person类的实例。然后，我们通过将方法添加到Person.prototype来定义类的行为。

使用class关键字，上述代码可以重写为：

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

  sayHello() {
    console.log("Hello, my name is " + this.name);
  }
}

// 创建对象
let person1 = new Person("Alice", 25);
person1.sayHello(); // 输出: Hello, my name is Alice

在这个新的语法中，我们使用class关键字来定义一个类Person。类中的构造函数使用constructor关键字定义，而不是使用函数名。类的方法直接在类的内部定义，不需要使用prototype关键字。

总结一下，class关键字提供了一种更简洁、更直观的方式来定义类和类的行为，使得面向对象编程更加容易和可读。

5. 继承

5.1 基于原型链的继承

基于原型链，我们可以实现继承的效果，也即将父类的实例设置成子类的原型，这样子类就可以通过原型链继承父类的属性和方法。

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

Person.prototype.getName = function(){ return this.name; }

function Employee(name, title){
    Person.call(this, name);
    this.title = title;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.getName = function(){ return this.name + "(" + this.title + ")" }

let employee1 = new Employee("John", "Developer");
console.log( employee1.getName() );  //输出：John(Developer)

最佳实践：在Employee构造函数中调用父类的构造函数并传递参数。

5.2 extends关键字

ES6引入了class关键字和extends关键字来实现继承。子类通过super关键字调用父类的构造函数，并且可以使用super关键字调用父类的方法。

class关键字和extends关键字只是一个语法糖，其本质上仍然是基于原型链的继承。


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

    getName() {
        return this.name;
    }
}

class Employee extends Person {
    constructor(name, title){
        super(name);
        this.title = title;
    }

    getName() {
        return this.name + "(" + this.title + ")";
    }
}

let employee1 = new Employee("John", "Developer");
console.log( employee1.getName() );  //输出：John(Developer)

6. 小结

本文详细介绍了JavaScript中原型，object，constructor，class，继承的概念，并给出了相应的示例代码。希望对你有帮助！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1620916.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【linux】编译器使用

【linux】编译器使用

目录 1. gcc ，g 编译器使用 a. 有关gcc的指令（g同理） 2. .o 文件和库的链接方式 a. 链接方式 b. 动态库 和 静态库 优缺点对比 c. debug 版本 和 release 版本 1. gcc ，g 编译器使用 a. 有关gcc的指令（g同理&…
阅读更多...
CCF区块链会议--Middleware 2024 截止5.24 附录用率

CCF区块链会议--Middleware 2024 截止5.24 附录用率

会议名称：Middleware CCF等级：CCF B类会议 类别：软件工程/系统软件/程序设计语言 录用率：2022年录用率38%（8/21） Topics of Interest The Middleware conference seeks original submissions of resear…
阅读更多...
销冠必备：高效跟进客户的四个技巧

销冠必备：高效跟进客户的四个技巧

作为一名销售，高效而精准地跟进客户是取得成功的关键。今天，我将分享四个技巧，让你也能够高效的跟进客户。 1、善于发问 通过多询问客户，你可以更好地了解客户的需求和痛点。在与客户交流时，不要只是简单地回答问题&…
阅读更多...
SpringCloud基础 Consul的引入

SpringCloud基础 Consul的引入

前言 首先是为什么引入consul这个组件 我们知道微服务分为很多个模块,这里模块中相互调用,我使用硬编码的模式是不好的 比如微服务模块需要更新的时候,我们使用硬编码的方式可能需要修改很多个地方 但是使用consul之后,就引入了注册中心,我们只需要将对应的服务注册为节点 这样…
阅读更多...
如何修复U盘在Windows 10上断开又重新连接的问题？这里有方法

如何修复U盘在Windows 10上断开又重新连接的问题？这里有方法

序言 有时，当你把U盘连接到电脑上时，U盘每隔几秒钟就会断开连接并重新连接，这导致你无法正常复制和传输文件，这真的很烦人。硬件或驱动程序可能有问题。 在这种情况下，你需要确保此U盘与其他计算机是否正常工作。如果是，则表示你的驱动器没有问题。如果不是，不要担心。…
阅读更多...
我们该如何看待AIGC（人工智能）

我们该如何看待AIGC（人工智能）

目录 AIGC的概述： AIGC的发展经历： AIGC的概述： [TOC]( 🚀文章目录) ---AIGC全称为AI-Generated Content，指基于生成对抗网络GAN、大型预训练模型等人工智能技术，通过已有数据寻找规律，并通过…
阅读更多...
服务网关GateWay基础

服务网关GateWay基础

1. 网关基础介绍1.1 网关是什么1.2 为啥要用网关1.3 常见的网关组件NginxNetflix ZuulSpring Cloud GatewayKongAPISIX综合比较 2. gateWay的使用2.1 springCloud整合gateway2.2 GateWay的相关用法2.3 GateWay路由使用示例基本用法转发/重定向负载请求动态路由 2.5 断言(Predic…
阅读更多...
Rust腐蚀服务器定制地图开服

Rust腐蚀服务器定制地图开服

Rust腐蚀服务器定制地图开服 大家好我是艾西一个做服务器租用的网络架构师。Rust腐蚀这个游戏有很多的插件mod作者，在地图制作这一块也是一样，有些好玩的地图可能大家在map网站找到了但是不知道怎么操作设置那么今天艾西给大家说下特定定制地图怎么弄。…
阅读更多...
L1-099 帮助色盲 - java

L1-099 帮助色盲 - java

L1-099 帮助色盲 代码长度限制 16 KB 时间限制 400 ms 内存限制 64 MB 栈限制 8192 KB 题目描述： 在古老的红绿灯面前，红绿色盲患者无法分辨当前亮起的灯是红色还是绿色，有些聪明人通过路口的策略是这样的：当红灯或绿灯亮起时&am…
阅读更多...
性能测试工具三——perf + FlameGraph（采样测试）

性能测试工具三——perf + FlameGraph（采样测试）

1. 安装 sudo apt install linux-tools-common 如果没安装成功可尝试制定特定内核版本的工具，例如sudo apt install linux-tools-6.5.0-27-generic。 2. 使用perf Step1：编译得到可执行程序，假设是a.out。 Step2：执行类似如下指…
阅读更多...
docker中的资源控制

docker中的资源控制

前言 docker 使用cgrqup控制资源，K8S 里面也有limit（使用上限） docker通过cgroup来控制容器使用的资源配额，包括CPU、内存、磁盘三大方面，基本覆盖了常见的资源配额和使用量控制。 Cgroup 是 Control …
阅读更多...
Ubuntu20.04安装 mysql8.0.32

Ubuntu20.04安装 mysql8.0.32

检查删除原有的mysql(可以不做，自己记录) 1、 下载 MySQL :: Download MySQL Community Server (Archived Versions) wget https://cdn.mysql.com/archives/mysql-8.0/mysql-server_8.0.32-1ubuntu20.04_amd64.deb-bundle.tar 2、解压到指定目录下 tar xvf mysq…
阅读更多...
CountDownLatch使用错误+未最终断开连接导致线程池资源耗尽

CountDownLatch使用错误+未最终断开连接导致线程池资源耗尽

错误描述&#xff1a; 我设置了CountDownLatch对线程的协作做出了一些限制&#xff0c;但是我发现运行一段时间以后便发现定时任务不运行了。 具体代码&#xff1a; public void sendToCertainWeb() throws IOException, InterruptedException {List<String> urlList …
阅读更多...
毕业设计注意事项（2024届更新中）

毕业设计注意事项（2024届更新中）

1.开题 根据学院发的开题报告模板完成&#xff0c;其中大纲部分可参考资料 2.毕设 根据资料中的毕设评价标准&#xff0c;对照工作量 3.论文 3.1 格式问题 非常重要&#xff0c;认真对比资料中我发的模板&#xff0c;格式有问题&#xff0c;答辩输一半&#xff01; 以word…
阅读更多...
梯度下降法总是在同一点收敛吗？

梯度下降法总是在同一点收敛吗？

梯度下降法总是在同一点收敛吗&#xff1f; 梯度下降法并不总是在同一点收敛。梯度下降法的收敛取决于多个因素&#xff0c;包括初始参数的选择、学习率的设置、损失函数的形状等。 以下是一些影响梯度下降法收敛行为的关键因素&#xff1a; 1.初始参数&#xff1a; 初始参数…
阅读更多...
OFDM同步技术

OFDM同步技术

文章目录 前言一、OFDM 同步技术二、MATLAB 仿真1、STO 估计技术①、核心源码②、仿真结果 2、CFO 估计技术①、核心源码②、仿真结果 三、资源自取 前言 本文对 OFDM 同步技术以思维导图的形式呈现&#xff0c;有关仿真部分进行了讲解实现。 一、OFDM 同步技术 OFDM 同步技术…
阅读更多...
【GitHub】github学生认证，使用copilot教程

【GitHub】github学生认证，使用copilot教程

github学生认证并使用copilot教程 写在最前面一.注册github账号1.1、注册1.2、完善你的profile 二、Github 学生认证 &#x1f308;你好呀&#xff01;我是 是Yu欸 &#x1f30c; 2024每日百字篆刻时光&#xff0c;感谢你的陪伴与支持 ~ &#x1f680; 欢迎一起踏上探险之旅&a…
阅读更多...
手机误删照片如何恢复？怎么快速有效找回照片？

手机误删照片如何恢复？怎么快速有效找回照片？

现在手机的功能越来越强大&#xff0c;手机厂家不断内卷&#xff0c;拍照功能越来越强&#xff0c;我们已经习惯用手机来记录生活了&#xff0c;因此储存的照片都特别珍贵&#xff0c;一旦误删&#xff0c;就容易造成不可磨灭的损失。那么手机误删照片如何恢复&#xff1f;本文…
阅读更多...
三招教你成为朋友圈运营高手，赶紧get起来！

三招教你成为朋友圈运营高手，赶紧get起来！

朋友圈作为一个重要的营销推广渠道&#xff0c;是能够为我们带来很多收益的。今天就给大家分享朋友圈运营的三个技巧&#xff0c;快快Get起来吧&#xff01; 第一招&#xff1a;明确人设定位 要在朋友圈里脱颖而出&#xff0c;首先我们需要明确自己的人设定位。选择一个与自己…
阅读更多...
小美打怪(动态规划）

小美打怪(动态规划）

小美在玩游戏&#xff0c;游戏中有 n 个怪物&#xff0c;怪物的血量为 h&#xff0c;攻击力为 ai​。小美的血量为 H&#xff0c;攻击力为 A&#xff0c;小美可以击败血量和攻击力都小于自己的怪物&#xff0c;并且打败后血量降为怪物的血量&#xff0c;攻击力降为怪物的攻击力…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023