0

0

js如何让原型链上的属性不可劫持

星降

星降

发布时间:2025-08-04 10:15:01

|

1029人浏览过

|

来源于php中文网

原创

要让javascript原型链上的属性不可劫持,需使用object.defineproperty()和object.freeze()等方法防止属性被修改或删除。1. 使用object.defineproperty()可设置属性的writable为false以阻止重写,configurable为false以阻止删除或重新配置;2. 使用object.freeze()可冻结整个对象,使其所有属性不可变;3. 可结合两者实现更严格的保护;4. 闭包、weakmap及typescript的private和readonly修饰符也提供额外保护机制。这些方法能有效防止意外或恶意修改原型链属性,确保对象行为一致、安全可靠,尤其适用于大型应用或核心库的开发,最终保障程序的稳定性和可维护性。

js如何让原型链上的属性不可劫持

让JavaScript原型链上的属性不可劫持,本质上是要防止这些属性被意外修改或覆盖,确保它们的行为符合预期。这在构建大型应用或者需要保证核心对象稳定性的场景下尤为重要。

js如何让原型链上的属性不可劫持

解决方案:

要实现原型链属性的不可劫持,可以结合使用

Object.defineProperty()
Object.freeze()
Object.defineProperty()
允许你精确控制属性的行为,包括可写性、可枚举性和可配置性。
Object.freeze()
则可以冻结一个对象,使其属性既不可修改也不可添加或删除。

js如何让原型链上的属性不可劫持
  1. 使用

    Object.defineProperty()
    控制属性行为:

    可以定义属性的

    writable
    false
    ,防止属性被重新赋值。如果需要更严格的控制,可以设置
    configurable
    false
    ,这将阻止属性被删除或重新配置。

    js如何让原型链上的属性不可劫持
    function MyClass() {}
    
    MyClass.prototype.myProperty = "initial value";
    
    Object.defineProperty(MyClass.prototype, 'myProperty', {
      writable: false, // 阻止属性被重新赋值
      configurable: false, // 阻止属性被删除或重新配置
      enumerable: true // 允许属性被枚举
    });
    
    const instance = new MyClass();
    
    // 尝试修改属性
    instance.myProperty = "new value"; // 严格模式下会报错,非严格模式下修改无效
    
    console.log(instance.myProperty); // 输出 "initial value"
    
    // 尝试删除属性
    delete instance.myProperty; // 返回 false,属性未被删除
    
    console.log(instance.myProperty); // 输出 "initial value"

    需要注意的是,即使

    writable
    false
    ,如果属性的值是一个对象,对象本身的属性仍然可以被修改。

  2. 使用

    Object.freeze()
    冻结对象:

    Object.freeze()
    会冻结整个对象,包括其原型。这意味着对象的属性既不可修改,也不可添加或删除。

    function MyClass() {}
    
    MyClass.prototype.myProperty = "initial value";
    
    Object.freeze(MyClass.prototype);
    
    const instance = new MyClass();
    
    // 尝试修改属性
    instance.myProperty = "new value"; // 严格模式下会报错,非严格模式下修改无效
    
    console.log(instance.myProperty); // 输出 "initial value"
    
    // 尝试删除属性
    delete instance.myProperty; // 返回 false,属性未被删除
    
    console.log(instance.myProperty); // 输出 "initial value"

    使用

    Object.freeze()
    需要谨慎,因为它会影响整个对象的行为。

  3. 结合使用:

    可以根据具体需求,选择合适的策略。如果只需要防止特定属性被修改,可以使用

    Object.defineProperty()
    。如果需要冻结整个原型对象,可以使用
    Object.freeze()

    Cutout.Pro抠图
    Cutout.Pro抠图

    AI批量抠图去背景

    下载
    function MyClass() {}
    
    MyClass.prototype.myProperty1 = "value1";
    MyClass.prototype.myProperty2 = "value2";
    
    Object.defineProperty(MyClass.prototype, 'myProperty1', {
      writable: false,
      configurable: false,
      enumerable: true
    });
    
    Object.freeze(MyClass.prototype); // 冻结整个原型链
    
    const instance = new MyClass();

如何理解JavaScript中的“劫持”?

在JavaScript上下文中,“劫持”通常指意外地修改或覆盖了对象或其原型链上的属性,导致程序行为不符合预期。这可能发生在多种场景下,例如:

  • 意外赋值: 无意中给一个属性赋了新值,覆盖了原来的值。
  • 原型污染: 修改了原型链上的属性,影响了所有继承自该原型的对象。
  • 恶意代码: 恶意代码故意修改对象的属性,以达到破坏或控制程序的目的。

理解“劫持”的概念,有助于我们更好地保护对象的完整性。

为什么要保护原型链上的属性?

保护原型链上的属性至关重要,原因如下:

  1. 确保一致性: 原型链上的属性定义了对象的通用行为。如果这些属性被修改,可能会导致对象的行为不一致,难以预测。
  2. 防止意外错误: 意外修改原型链上的属性可能会导致程序出现难以调试的错误。
  3. 增强安全性: 保护原型链上的属性可以防止恶意代码篡改对象的行为,增强程序的安全性。

特别是对于一些核心对象或库,保护原型链的完整性非常重要。

除了
Object.defineProperty()
Object.freeze()
,还有其他方法吗?

除了

Object.defineProperty()
Object.freeze()
,还有一些其他的技术可以用来保护原型链上的属性:

  1. 使用闭包: 可以将属性封装在闭包中,防止外部直接访问和修改。

    function MyClass() {
      let myProperty = "initial value";
    
      this.getMyProperty = function() {
        return myProperty;
      };
    }
    
    const instance = new MyClass();
    
    console.log(instance.getMyProperty()); // 输出 "initial value"
    
    // 无法直接修改 myProperty

    这种方法可以提供更强的封装性,但也可能增加代码的复杂性。

  2. 使用WeakMap: 可以使用

    WeakMap
    来存储对象的私有属性,防止外部直接访问。

    const privateData = new WeakMap();
    
    function MyClass() {
      privateData.set(this, { myProperty: "initial value" });
    }
    
    MyClass.prototype.getMyProperty = function() {
      return privateData.get(this).myProperty;
    };
    
    const instance = new MyClass();
    
    console.log(instance.getMyProperty()); // 输出 "initial value"
    
    // 无法直接修改 privateData 中的属性

    WeakMap
    是一种弱引用 Map,当对象被垃圾回收时,
    WeakMap
    中对应的键值对也会被自动删除。

  3. 使用TypeScript的

    private
    readonly
    修饰符:
    如果使用TypeScript,可以使用
    private
    readonly
    修饰符来限制属性的访问和修改。

    class MyClass {
      private myProperty: string = "initial value";
      readonly readOnlyProperty: string = "read only";
    
      getMyProperty(): string {
        return this.myProperty;
      }
    }
    
    const instance = new MyClass();
    
    console.log(instance.getMyProperty()); // 输出 "initial value"
    
    // instance.myProperty = "new value"; // 编译错误:属性“myProperty”为私有属性,只能在类“MyClass”中访问。
    // instance.readOnlyProperty = "new value"; // 编译错误:无法分配到“readOnlyProperty”,因为它是只读属性。

    这些方法各有优缺点,选择哪种方法取决于具体的应用场景和需求。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript工程化开发与Vite构建优化实践
TypeScript工程化开发与Vite构建优化实践

本专题面向前端开发者,深入讲解 TypeScript 类型系统与大型项目结构设计方法,并结合 Vite 构建工具优化前端工程化流程。内容包括模块化设计、类型声明管理、代码分割、热更新原理以及构建性能调优。通过完整项目示例,帮助开发者提升代码可维护性与开发效率。

49

2026.02.13

TypeScript全栈项目架构与接口规范设计
TypeScript全栈项目架构与接口规范设计

本专题面向全栈开发者,系统讲解基于 TypeScript 构建前后端统一技术栈的工程化实践。内容涵盖项目分层设计、接口协议规范、类型共享机制、错误码体系设计、接口自动化生成与文档维护方案。通过完整项目示例,帮助开发者构建结构清晰、类型安全、易维护的现代全栈应用架构。

196

2026.02.25

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

73

2026.03.13

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

153

2025.07.29

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

77

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

40

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

67

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

47

2025.11.27

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

69

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
TypeScript 教程
TypeScript 教程

共19课时 | 3.5万人学习

TypeScript——十天技能课堂
TypeScript——十天技能课堂

共21课时 | 1.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号