当前位置:首页 » 《我的小黑屋》 » 正文

一文搞懂 js 原型和原型链

17 人参与  2024年09月10日 12:03  分类 : 《我的小黑屋》  评论

点击全文阅读


文章目录

一、前言二、原型2.1 概念2.2 获取原型的方法2.2.1 __proto__获取方式2.2.2 通过构造函数prototype 属性获取2.2.2 ES6 class 通过Object.getPrototypeOf()获取类原型 2.3 通过原型实现继承2.4 原型的作用 三、 原型链四、ES6实现继承五、综述


一、前言

原型和原型链是JavaScript中与对象有关的重要概念,但是部分前端开发者却不太理解,也不清楚原型链有什么用处。其实,学过其他面对对象语言的同学应该了解,对象是由类生成的实例,类与类之间有继承的关系。在ES6之前,JavaScript中并没有class,实现类和继承的方法就是使用原型。在我个人看来,JS中类和原型链的设计和语法由于一些历史或包袱问题而不易用,也不易于理解。因此在ES6中推出了class相关的语法,和其他语言更接近,也更易用。
ES6 class类
ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。(ECMAScript6入门教程 阮一峰)
虽然有了class,但是原型链相关的内容我们依然要掌握。不仅是因为作为前端开发者,我们要深入理解语法。而且在查看源码,以及实现一些复杂的面对对象写法时,依然是有用的。因此在这篇文章中,我们一起搞懂JavaScript中的原型和原型链。

二、原型

2.1 概念

JS的任何一个对象都拥有一个“原型对象”,他可以使用自己原型对象上的所有属性与方法。

2.2 获取原型的方法

2.2.1 __proto__获取方式

注意__是两个下划线。

// 1. 利用__proto__来调用原型let cat = {    name : '伽罗'}// 现在通过 cat.__proto__.eat 为cat的原型添加了一个方法 eat 这个方法来输出吃饭cat.__proto__.eat=function() {    console.log('吃饭')}cat.eat()

2.2.2 通过构造函数prototype 属性获取

function Cat(name,age){    this.name=name    this.age=age}       let cat = new Cat('伽罗',2)            Cat.prototype.eat=function(){    console.log('吃饭')}cat.eat()

2.2.2 ES6 class 通过Object.getPrototypeOf()获取类原型

class MyClass {  constructor() {    // 构造函数代码  }  classMethod() {    // 类方法  }}const prototype = Object.getPrototypeOf(MyClass);console.log(prototype); // 输出 MyClass 的原型对象

2.3 通过原型实现继承

现在有一个管理系统。分为管理员和普通用户,普通用户只能登录,而管理员不光能登录还能删除用户。
Admin 可以使用自己的原型全部的方法。如果让自己的原型称为User的一个实例。即=new User()。那就相当于Admin 可以通过原型使用User的全部属性与方法。就实现了继承的思想。
在这里插入图片描述

function User(username,password){    this.username=username    this.password=password     this.login=function(){        console.log('登录');    }}function Admin(){    this.deletePerson=function(){        console.log('删除用户');    }}// 实现继承Admin.prototype = new User()let admin=new Admin()admin.login()

2.4 原型的作用

1、模拟继承
2、规范日期:通过下述代码可以获取到当前日期,显示为 Wed Jul 06 2022 13:20:28 GMT+0800 (GMT+08:00)。但是 我不想要这种格式输出显示,我想显示成‘年/月/日’的格式,那么如何修改。

let date = new Date()console.log(date);
let date = new Date()Date.prototype.format = function() {    let year = this.getFullYear()    // 月份输出从0 开始 所以加一    let month = this.getMonth()+1    let date =  this.getDate()    return `${year}年${month}月${date}日`}console.log(date.format());// 输出 2024年8月29日

三、 原型链

定义:JavaScript 规定,所有对象都有自己的原型对象(prototype)。一方面,任何一个对象,都可以充当其他对象的原型;另一方面,由于原型对象也是对象,所以它也有自己的原型。因此,就会形成一个“原型链”(prototype chain):对象到原型,再到原型的原型……
在这里插入图片描述
最后一个原型:原型链的尽头就是object。
在这里插入图片描述
还是管理员的例子,现在admin想调用login()。但是User() 里面没有login() 那么就会顺着原型链,继续向上寻找,直到找到objec,如果存在login()则输出,如果没有则报错。

function User(username,password){   this.username = username   this.password = password // this.login=function(){ //     console.log('登录'); // }}function Admin(){   this.deletePerson=function(){       console.log('删除用户');   }}// 对objcet 上原型添加登录方法。Object.prototype.login = function(){    console.log('Object上的登录');}User.prototype = new Object()Admin.prototype = new User()let admin=new Admin()admin.login()

四、ES6实现继承

那么在ES6之前不可以使用类,而JS在ES6之后引入了类的概念,那么就可以直接使用继承的思维了。
上述关于管理与普通用户的例子就可以修改ES6之后的写法。

class User{  constructor(username,password){      this.username=username      this.password=password  }  login(){      console.log('登录');  }} class Admin extends User{  deletePerson(){      console.log('删除用户');  }} let admin = new Admin()admin.login()

五、综述

总体看来,虽然使用原型链确实可以实现类和继承的等面对对象特性,但是相比于其他语言更晦涩且不容易理解。更推荐ES6 使用class类来实现继承。


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/157723.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1