masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 三分钟带你了解Object.defineProperty()方法

三分钟带你了解Object.defineProperty()方法

醉折花枝作酒筹
Lepaskan： 2021-04-23 09:11:31
ke hadapan
1935 orang telah melayarinya

本篇文章给大家详细介绍一下Object.defineProperty()方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

三分钟带你了解Object.defineProperty()方法

语法

Object.defineProperty(obj, prop, descriptor)

定义

在对象上定义一个新属性，可以修改原有的属性！

参数

obj 目标对象。

prop 定义或修改的属性的名字。

descriptor 定义或修改的属性描述符。（不能同时设置value、writable 与 get、set的值）

属性描述符

configurable: 布尔 --> 是否可配置

enumerable: 布尔 --> 是否可枚举

value: 默认值

writable: 布尔 --> 是否可重写

/访问(存取)描述符

get //回调函数 根据其他属性,动态计算当前属性的值

set //回调函数 监听当前属性值是否发生改变 然后更新其他相关属性

返回值

返回被操作的对象，即返回 obj 参数

以下代码是简单实现数据双向绑定：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="ipt" />
    <p id="lc"></p>
  </body>
</html>
<script>
  //获取页面元素
  var ipt = document.getElementById("ipt");
  var ps = document.getElementById("lc");

  var obj = { name: "" };

  Object.defineProperty(obj, "name", {
    get() {
      return ipt.value;
    },
    set(newval) {
      ipt.value = newval;
      ps.innerHTML = newval;
    },
  });

  ipt.addEventListener("keyup", function() {
    ps.innerHTML = ipt.value; //数据赋值
  });
</script>
Salin selepas log masuk

效果图展示：

【推荐学习：javascript高级教程】

Atas ialah kandungan terperinci 三分钟带你了解Object.defineProperty()方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
Object.defineProperty()方法
sumber：csdn.net
Artikel sebelumnya：javascript如何利用sum函数求和 Artikel seterusnya：socket.io如何即时通信前端配合Node
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bagaimana untuk mencetuskan render (dengan penapis dan penomboran) pada kaedah isihan dalam React? Berikut ialah komponen gaya Sort.js saya: <SortWrapper><SortText>SortBy</So...
daripada 2024-04-06 21:28:37
0
1
2257
Pemeriksa Sudoku tidak berfungsi? Bolehkah sesiapa membantu saya mengenal pasti ralat? Saya mencuba segala-galanya pada editor dalam talian tetapi masih mendapat ralat. Tetapi a...
daripada 2024-04-06 21:21:07
0
1
474
Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...
daripada 2024-04-06 20:22:15
0
1
454
Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...
daripada 2024-04-06 20:02:10
0
2
543
Kira jumlah medan dalam jadual lain menggunakan pertanyaan MySQL SQL Saya mempunyai skema seperti ini: Jadual pengguna dengan atribut "user_id" dan &...
daripada 2024-04-06 19:39:29
0
1
441
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan