某跳动面试官：请你设计一下ES6中 class 实现私有属性

最新推荐文章于 2022-09-02 09:40:37 发布
最新推荐文章于 2022-09-02 09:40:37 发布
阅读量607 收藏
点赞数 2
分类专栏： 小狮子前端Vue进阶小册 文章标签： class js es6/es7
原则上允许部分内容转载，转载请注明原文章地址！
本文链接：https://blog.csdn.net/weixin_42429718/article/details/108994074
版权
本文讨论了如何在ES6的class中实现私有属性，从约定命名、闭包、Symbol、WeakMap到Proxy的使用，详细解析了各种实现方式的优缺点，并提到了TypeScript中的解决方案。通过实例代码展示了实现过程，同时也指出不同方法存在的问题，如实例间共享变量、遍历显示私有属性等。文章鼓励读者探索和分享更多实现私有属性的方法。
摘要由CSDN通过智能技术生成

引言

这个问题也是和上一篇博客一样，也是在今年8月份的时候被问到过，当时知道class这个东西，在社区里面看过一些class继承相关知识，但是没有真正动手敲过代码，犹记得当时对话场景是这样的：

面试官：你应该了解过ES6吧？（这个当然），那好，那你知道ES6中有一个class，你可以设计实现它的私有属性吗？

我：emmm（此时我想了想，好像可以用闭包来做），我可以采用闭包的思想来做嘛？

面试官：当然可以（show me the code）

于是乎，我就写下了这一份代码：

class classA{
   
	// xxx省略
	let fun
了解本专栏 订阅专栏 解锁全文 超级会员免费看
一百个Chocolate
关注
专栏目录
订阅专栏
2023年前端面试汇总-React
越陌度阡
06-29 831
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
前端面试题_10_ES6的class有哪些特性？
Pe7erjmd的博客
11-30 709
ES5/ES6的定义对象的区别 class基本概念 在JS里面，它实际上是没有类的概念的，我们如果想要实现一个面向对象的一个编程，那么只能够借助构造函数，但是构造函数有着自身的缺点，首先第一点它的写法不清晰，我们需要继承的话就需要手动去操作prototype；其次它面向对象的思想也不是很强烈，所以在ES6它封装了一层构造函数的语法糖，就叫Class,封装后有了一个更清晰的写法，而且更加像一个面向对象编程语言。 类是对象的抽象，对象是类的实例 class（类）作为对象的模板被引入，可以通过class关键字定义
ES6中的class类
YUWA的博客
01-02 659
基础语法 添加属性在constructor()函数中 方法写在constructor()外面 class Person { constructor(name,age){//构造函数（方法），调用new，自动执行 // console.log(`这个人叫${name}，冻龄了，永远${age}`) this.name = n...
es6 class
京都玩家
03-27 612
es6 中的class
ES6 class类
记录点滴
02-02 370
ES6中的类 js中生成实例对象的传统方法是通过构造函数。而ES6提供了更接近传统语言的写法，引入了class类这个概念，作为对象的模板，通过class类关键字，可以定义类。 ES6的class可以看做一个语法糖而已，它的绝大部分功能，ES5都可以做到，只不过写法让对象原型的写法更加清晰。更像面向对象的语法而已： ES5与ES6对比： 对比两者的写法：还是ES6看起来更加清晰、明了，里边有...
@es6 类的使用
qq_33761266的博客
01-30 124
class Parent { constructor(x, y) { this.x = x; this.y = y; } render() { } static ajax() { return 5; } } Parent.prototype.AA = 10;//CLASS中只能写原型的方法如re...
面试官:如何自己手写一个mini的vuex3?
qq_21890655的博客
05-10 271
介绍 说来惭愧，这对于喜欢摸鱼的程序员来说，vue3都发布这么久了，现在才开始阅读vuex3源码，现在分享一下个人对这次学习的总结，写的不好请大家轻喷。 地址 源码地址:vuejs/vuex@3.6.2 myGithub:2460392754/mini-vuex3 项目结构 src ├── core │ ├── helpers.ts │ ├── index.ts │ └── store.ts ├── types │ └── index.ts ├── utils │ ├── index.t
非科班出身拿下字节跳动前端offer，我有一份50000字面试宝典分享给你！
pig_html的博客
03-22 4146
个人经历 本人211学校，回想我大一的时候，读的是机电工程，因为对计算机专业好就业比较看重，后来在大一下的时候开始了自己双学位之路，开始了学计算机专业，从此开始了科班生的生涯。接触前端也大概是在大一下学期，在一个叫腾讯课堂的地方偶然发现了一套 JS 的视频，看着感觉不错，想深入这个领域，但后来发现越往后面学越需要一些计算机科班的专业基础，于是我当时果断转到了计算机。因此这一步选择算得上偶然，也是一个必然。 大二上学校的课程压力比较大，不温不火地学了一个学期，中途有过做全栈的想法，报了个 Python Web
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文
CRPER
03-13 6486
前言 去年年末研发组解散失业, so选择回去学车了,也顺利拿到了驾照 最近回归大深圳….开始踏上漫漫的找工作之路; “拉勾上吊一百年不匹配!!!”,”BOSS直聘日夜没反应!!!” 题目范围涵盖我最近遇到的笔试题和面谈的(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React) emm…..这里不列举哪些公司了, 若是你完整的阅读一...
vue私有组件属性覆盖问题
ganlubaba666的博客
06-22 2185
问题 在写项目的时候发现一个问题 当在父组件中引用私用组件时，在父组件中加入的值会把子组件中根元素上相应的属性覆盖 <planBox :pthisPlan="pthisPlan" class="t32"></planBox> <template> <div id="thisPlan" class="thisPlan"> ...
Class 的基本语法
Geordies的博客
02-09 727
# Class 的基本语法 # 简介 # 类的由来 JavaScript 语言中，生成实例对象的传统方法是通过构造函数。下面是一个例子。 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this....
ES6 Class 定义私有属性或私有方法
雾里看花叹朦胧
03-31 9493
私有方法是常见需求，但 ES6 不提供，只能通过变通方法模拟实现。 一种做法是在命名上加以区别，比如使用下划线表示私有方法。但是，这种命名是不保险的，在类的外部，还是可以调用到这个方法。 class Widget { // 公有方法 foo (baz) { this._bar(baz); } // 私有方法 _bar(baz) { return th...
Es6之Class详解（含常问面试题）
lin1072368472的博客
08-29 3011
Class js中class的由来是由构造函数衍生出来的在我们默认把首字母大写的函数称为构造函数 function Person () { console.log("this is a method"); } 而在es6中就引入class的关键字，class只是一个语法糖，它的实现基本可以使用es5实现 function Person () { console.log("this is a method"); } class Perosn { constructor(
es7 class的写法
weixin_34179968的博客
11-10 281
再看vue-router源码的时候（代码链接）看到这样的代码片段： export default class VueRouter { app: any; apps: Array<any>; mode: string; constructor (options: RouterOptions = {}) { this.app = null ...
es6 Class 的私有属性
歪脖先生的博客
02-01 6116
Class 的私有属性 与私有方法一样，ES6 不支持私有属性。目前，有一个提案，为class加了私有属性。方法是在属性名之前，使用#表示。 class Point { #x; constructor(x = 0) { #x = +x; // 写成 this.#x 亦可 } get x() { return #x } set x(value) { #x = +value }
class 中私有变量
做一个有知识的流氓
09-02 369
我们可以通过在属性前添加井号（#）作为前缀来声明私有属性。这种行为和 WeakMap 中的。所以在不远的未来，我们有希望不使用特殊技巧或牺牲代码可读性，就能使用。
JavaScript实现私有属性
weixin_33787529的博客
10-27 171
JavaScript被很多人认为并不是一种面向对象语言，原因有很多种，比如JavaScript没有类，不能提供传统的类式继承；再比如JavaScript不能实现信息的隐藏，不能实现私有成员。本文并不是为了打破以上误解（实际上笔者自己也有困惑），只是简单介绍几种JavaScript实现私有属性的方式，以及各自的优劣。 1. 基于编码规范约定实现方式 很多编码规范把以下划线_开头的变量约定为私有成员，...
ES6学习——新的语法：Symbol private类属性
Challenge Next Challenge
05-02 3901
ES6本身并没有提供class属性的私有（private）还是公有（public）的特性，以前要实现类属性的私有化，一般可以通过下面这种方法进行模拟： function Person(name) { var _name = name this.setName = function(name) { _name = name; } this.getName = functio
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一百个Chocolate

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值