Una pregunta de alcance
1. 变量、函数声明提升
2. 按顺序执行
3. 关于 this
-> 调用函数前面没有加 xx.fn() 都指向window
-> 匿名函数指向 window 对象
var 没有块状作用域的概念/ let、const
var foo = 1;
function bar() {
if (!foo) {
var foo = 10;
}
// alert(foo); // 10
}
bar();
- Primero se promueve la función y luego se promueve la declaración de variable. En este momento, no se asigna foo, por lo que se le asigna el valor de 10.
- Entonces, la impresión dentro de la función es 10.
var a = 1;
function b() {
a = 10;
return;
function a() {
}
}
b();
// alert(a); // 1
- Los valores de tipo simple se utilizan como parámetros y los cambios dentro de la función no afectarán las variables entrantes
- Valor del tipo de referencia como parámetro, los cambios en la función afectarán las variables entrantes
- Entonces, imprimir externamente sigue siendo 1.
Dos nuevas formas de escribir propiedades de objetos
- 1. Si el nombre de la propiedad del objeto es el mismo que el nombre de la variable que representa el valor de la propiedad, se puede abreviar como el nombre de la propiedad al vincular la propiedad.
var age = 12;
var tel = "1234567";
var user = {
name: "李白",
// age: age
age,
tel
}
console.log(user); // user={
name:"李白",age:12,tel:"1234567"}
- 2. Al vincular las propiedades de una función a un objeto, puede eliminar: función.
var obj = {
say: function(){
console.log("say");
},
run(){
console.log("run");
}
}
obj.say();
obj.run();
Tres atributos de datos de objeto
-
1. configurable : si el atributo del objeto se puede configurar, si se puede eliminar
** 2. enumerable: ** si el atributo del objeto se puede atravesar y procesar Los
dos atributos anteriores se pueden usar como atributos de acceso con get () y set () -
** 3.escribible: ** Se pueden reasignar las propiedades del objeto
- 4.valor: el valor de las propiedades del objeto
solo se usa como propiedades de datos y no se mezcla con las propiedades de acceso -
Object.defineProperty (obj, propertyName, descriptor) -obj, propertyName
el objeto y la propiedad que se van a procesar.
-descriptor El descriptor de atributo que se aplicará.
- (El descriptor declarará errores de sintaxis en el caso de uso estricto) -
El método defineProperties
Object.defineProperties () se utiliza para definir varias propiedades a la vez. Este método acepta dos parámetros de objeto:
Object.defineProperties (usuario, { nombre: {valor: "John", modificable: falso}, apellido: {valor: "Smith", modificable: falso}, //…});
- getOwnPropertyNames
Object.getOwnPropertyNames (obj) puede obtener todas las propiedades de obj, independientemente de si es enumerable o no.
var obj = { nombre: "李白", edad: 24} Object.defineProperty (obj, "tel", { valor: "123456"}) Object.getOwnPropertyNames (obj) // ["nombre", "edad", " tel ”]
- Object.keys: obtiene
todas las propiedades enumerables de un objeto
var obj = { nombre: “李白”, edad: 24} Object.defineProperty (obj, “tel”, { valor: “123456”}) console.log (Object.keys (obj)); // ["nombre Edad"]
- Object.getOwnPropertyDescriptor (obj, "Property") para
obtener el descriptor de propiedad del objeto - Si las propiedades del objeto se declaran mediante definexx, los valores predeterminados de sus cuatro descriptores de propiedades de datos son falsos e indefinidos.
var obj = {
name: "张三",
age: 13
}
Object.defineProperty(obj, "tel", {
// 通过 defineProperty 定义的属性，三个数据配置项均为false
value: "123456"
})
console.log(Object.getOwnPropertyDescriptor(obj, "tel"));
console.log(Object.getOwnPropertyDescriptor(obj, "age"));
Cuatro atributos de acceso
obtener: función, leer el atributo, el valor de retorno es el valor de lectura
conjunto: función, establecer el atributo llamar a esta función, el parámetro es el valor establecido对象上有 get set 描述属性 obj = { get 属性名(){ 返回值为读取此属性的值 } set 属性名(设置的值){ 设置此属性的值 } } 在对象中以 _ 开头的属性表示不可访问更改属性（保护属性）， 需要自行设置，加_只是为了告诉别人。
var user = {
lastName: "李",
firstName: "太白",
get fullName(){
//读取属性时调用此函数
return this.lastName + this.firstName;
},
set fullName(v){
// 设置属性时调用此函数
this.lastName = v[0];
this.firstName = v.slice(1);
}
}
console.log(user.fullName); // 读取调用get结果：李太白
user.fullName = "苏东坡"; // 设置
console.log(user); //设置后调用结果： 苏东坡
var book = {
// 原价 50
_price: 50,
cut: .9
}
Object.defineProperty(book, "price", {
configurable: false,
enumerable: true,
get() {
return this._price * this.cut;
}
})
console.log("9折", book.price); //45
book.cut = .6;
console.log("6折", book.price); // 30
Cinco encuadernaciones bidireccionales
Por ejemplo:
<input type="text" placeholder="输入用户名" value="李白">
var data = {
name: ""
}
// 从外边获取值
var ipt = document.querySelector("input");
Object.defineProperty(data, "name", {
get(){
return ipt.value;
},
set(v){
$("input").val(v);
}
})
// 读取data.name 返回input.value
console.log(data.name); // 李白
// 设置data.name input.value也更改 5秒后变成苏轼
setTimeout(function (){
data.name = "苏轼";
}, 5000)
Tema:
Agregue atributos del módulo v a cualquier elemento de entrada, agregue los atributos correspondientes en los datos e implemente el enlace de datos bidireccional. Los atributos generados no se pueden enumerar.
name改为"李白",data中添加name属性,值为"李白"
<input type="text"> placeholder="请输入姓名" value="" v-module="name">
<input type="text"> placeholder="请输入年龄" value="" v-module="age">
<input type="text"> placeholder="请输入年龄" value="">
<script>
var data = {
};
</script>
var data = {
};
// 获取所有带 v-module 属性的input标签
var ipts = document.querySelectorAll("input[v-module]");
for(let i = 0; i < ipts.length; i ++){
var key = ipts[i].getAttribute("v-module");
console.log(key);
Object.defineProperties(data, {
[key]: {
enumerable: false,
get(){
return ipts[i].value;
},
set(v){
ipts[i].value = v;
}
}
})
}
