Tres formas de crear objetos
- Crea un objeto a través de la nueva palabra clave
- Crea objetos a través de literales
- Crea un objeto a través del constructor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
// 利用new关键字创建对象
var obj1 = new Object();
// 利用字面量创建对象
var obj2 = {};
// 利用构造函数创建对象
function People(name, age) {
this.name = name;
this.age = age;
this.say = function() {
console.log('hello word')
}
}
// 利用构造函数创建实例化对象
var People1 = new People('尧子陌', "24");
console.log(People1); //打印这个对象
console.log(People1.name);
People1.say()
</script>
</html>
Constructor
Constructor es una función especial que se utiliza principalmente para inicializar objetos.
Asignar valores iniciales a variables miembro de objeto. En resumen, extraiga los atributos y métodos públicos en el objeto y luego encapsule la bolsa en esta función
Precauciones
1. El constructor se usa para crear un cierto tipo de objeto, y su primera letra debe estar en mayúscula.
2. Constructor solo tiene sentido usarlo con new.
nueva palabra clave
1. Crea un nuevo objeto en la memoria.
2. Deje que esto apunte a este nuevo objeto
3. Ejecute el código del constructor, agregue propiedades y métodos a este nuevo objeto
4. Devuelve este nuevo objeto (el constructor no necesita volver a escribir)
Miembros estáticos y miembros de instancia
Miembros estáticos: los miembros agregados al cuerpo del constructor se denominan miembros estáticos y solo el constructor puede llamarlos.
Miembros de instancia: los miembros de objeto creados dentro del constructor se denominan miembros de instancia y solo el objeto instanciado puede acceder a ellos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>静态成员及实例成员</title>
</head>
<body>
</body>
<script>
function People(name, age) {
// 在构造函数内部创建的成员属于实例化成员，只有实例化对象才能调用
this.name = name;
this.age = age;
this.say = function() {
return 'hello 尧子陌'
}
}
var People1 = new People('尧子陌', "23");
// 实例化成员只能通过实例化对象调用
console.log(People1.say())
// 在构造函数本体上添加的成员属于静态成员，只能构造函数调用
People.sex = '男';
console.log(People.sex)
</script>
</html>
prototipo
El constructor es muy útil pero una pérdida de memoria.
Javascript estipula que cada constructor tiene una propiedad de prototipo, que apunta a un objeto. Podemos definir estos métodos invariantes en el prototipo, de modo que todos los objetos instanciados puedan compartir estos métodos.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型</title>
</head>
<body>
</body>
<script>
function People(name, age) {
// 在构造函数内部创建的成员属于实例化成员，只有实例化对象才能调用
this.name = name;
this.age = age;
}
People.prototype.say =function(){
return "hello woord"
}
var People1 = new People('尧子陌', "23");
console.log(People1.say())
var People2 = new People('惊鸿一面','28');
console.log(People2.say());
console.log(People1.say === People2.say);
</script>
</html>
El prototipo del objeto proto
Cada objeto tendrá un atributo _proto_, que apunta al objeto prototipo en el constructor y tiene una relación congruente con él.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型</title>
</head>
<body>
</body>
<script>
function People(name, age) {
// 在构造函数内部创建的成员属于实例化成员，只有实例化对象才能调用
this.name = name;
this.age = age;
}
People.prototype.say = function() {
return "hello woord"
}
var People1 = new People('尧子陌', "23");
console.log(People1.say())
console.log(People1.__proto__);//指向构造函数的原型
console.log(People1.__proto__===People.prototype) //true
</script>
</html>
constructor constructor
Constructor: apunta al constructor referenciado, lo que permite que el objeto prototipo apunte nuevamente al constructor.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型</title>
</head>
<body>
</body>
<script>
function People(name, age) {
// 在构造函数内部创建的成员属于实例化成员，只有实例化对象才能调用
this.name = name;
this.age = age;
}
People.prototype = {
// 将原型对象采用对象赋值的情况下，constructor的指向会变，手动将constructor的指向改回来
constructor:People,
say:function(){
return "hello"
},
eat:function(){
return "banner"
}
}
var People1 = new People('尧子陌', "23");
console.log(People1.say())
console.log(People1.__proto__);//指向构造函数的原型
console.log(People1.__proto__===People.prototype) //true
console.log(People.prototype.constructor);
console.log(People1.__proto__.constructor)
</script>
</html>
La conexión entre el constructor de objetos de instancia de objeto prototipo
1. El atributo prototipo del constructor apunta al objeto prototipo del constructor
2. El objeto de instancia lo crea el constructor, y el atributo __proto__ del objeto de instancia apunta al
objeto prototipo del constructor 3. El atributo constructor del objeto prototipo del constructor apunta al constructor, el atributo del constructor del prototipo del objeto de instancia también apunta al constructor
Cadena de prototipos
Cualquier objeto tendrá el atributo _proto_, y todo en js es un objeto. La cadena conectada por el atributo _proto_ se llama cadena prototipo y el valor final es nulo.
El atributo _proto_ del prototipo del constructor apunta a Object.prototype
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型</title>
</head>
<body>
</body>
<script>
function People(name, age) {
// 在构造函数内部创建的成员属于实例化成员，只有实例化对象才能调用
this.name = name;
this.age = age;
}
People.prototype = {
// 将原型对象采用对象赋值的情况下，constructor的指向会变，手动将constructor的指向改回来
constructor:People,
say:function(){
return "hello"
},
eat:function(){
return "banner"
}
}
var People1 = new People('尧子陌', "23");
// 构造函数的原型的_proto_属性指向Object.prototype
console.log(People.prototype.__proto__=== Object.prototype) //true
console.log(Object.prototype.__proto__) //null
</script>
</html>
mecanismo de búsqueda de miembros de js
- Cuando accedemos a las propiedades y métodos de un objeto, primero miramos si el objeto en sí tiene propiedades y métodos.
- De lo contrario, continúe buscando a través de la propiedad _proto_ en el objeto prototipo (Object.prototype)
- De lo contrario, continúe buscando hacia arriba de la misma manera hasta que el valor sea nulo
En pocas palabras, es encontrar a lo largo de una línea.
El esto en el objeto prototipo apunta al problema
- El this en el constructor se refiere al objeto instanciado.
- El esto en el prototipo se refiere al objeto instanciado
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原型对象中的this指向</title>
</head>
<body>
<script>
var that
function Star(name, age) {
this.name = name;
this.age = age;
}
Star.prototype.sing = function() {
console.log('hello')
that = this;
}
var star1 = new Star('尧子陌', '22');
star1.sing()
console.log(that === star1)
</script>
</body>
</html>
Extienda los objetos integrados
El objeto integrado original se puede ampliar y personalizar a través del objeto prototipo.
Nota: los objetos integrados, como las matrices y cadenas integradas, no se pueden sobrescribir con objetos prototipo;
método call ()
El método call () puede llamar a funciones, modificar este punto y pasar parámetros.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>call()方法</title>
</head>
<body>
<script>
function fn(x,y) {
console.log('手磨咖啡')
console.log(this)
console.log(x+y)
}
var o ={
name:"尧子陌"
}
// 不仅改变this指向，而且调用函数 甚至能进行传参
fn.call(o,1,2)
</script>
</body>
</html>
heredar
ES6 no nos proporcionaba la herencia extendida antes. Podemos implementar la herencia a través de la simulación de constructor + objeto prototipo, que se llama herencia compuesta.
Pedir prestado el constructor para heredar las propiedades del tipo padre
Principio básico: a través de call () para apuntar el this del tipo padre al this del subtipo, el subtipo puede heredar las propiedades del tipo padre
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>借用父构造函数函数继承属性</title>
</head>
<body>
<script>
// 父类构造函数
function Father(name,age){
console.log(this) //此时this指向子类的实例对象
this.name =name;
this.age = age;
}
//子类构造函数
function Son(name,age,score) {
// 借助call（）方法让父类中的this指向子类的this
Father.call(this,name,age);
this.score = score;
}
var son = new Son('尧子陌',18);
console.log(son.name);//尧子陌
</script>
</body>
</html>
Pida prestado el objeto prototipo para heredar el método de la clase principal
La idea es la siguiente
-
Prototipo de subclase = nueva clase padre
-
Porque el objeto instanciado de la clase padre abrirá espacio adicional y no afectará al objeto prototipo de la clase padre.
-
Reapunta el constructor de la subclase al constructor de la subclase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>借用原型对象继承父类的方法</title>
</head>
<body>
<script>
// 父构造函数
function Father(name,age) {
this.name =name;
this.age =age;
}
Father.prototype.money = function () {
console.log('10000')
}
// 子构造函数
function Son(name,age,score) {
Father.call(this,name,age);
this.score = score;
}
//将子类的constructor构造函数重新指向原来的构造函数
Son.prototype.constructor = Son;
//子类的原型对象等于父类的实例化对象
Son.prototype = new Father()
var father = new Father('惊鸿一面','24');
father.money()
var son = new Son('尧子陌','28');
console.log(son.name)
son.money()
</script>
</body>
</html>
Nuevo método de matriz ES6
Métodos de iteración (recorrido): forEach (), map (), filter (), some (), every ()
para cada()
array.forEach (función (valor actual, índice, arr)
- currentValue: el valor del elemento actual en la matriz
- índice: el índice del elemento actual en la matriz
- arr: el objeto de matriz en sí
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>forEach()方法</title>
</head>
<body>
<script>
// 创建一个数组
var arr = [1, 2, 3]
// 求和的变量
var sum = 0;
arr.forEach(function (value, index, array) {
console.log(value);
console.log(index);
console.log(array)
sum += value;
})
console.log(sum)
</script>
</body>
</html>
filtrar()
array.filter (función (valor actual, índice, arr))
Nota: se utiliza principalmente para filtrar la matriz, la devolución es una nueva matriz
- currentValue: el valor del elemento actual en la matriz
- índice: el índice del elemento actual en la matriz
- arr: el objeto de matriz en sí
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>filter()</title>
</head>
<body>
<script>
var arr = [20, 50, 80, 100, 150, 500, 600];
var newArr = arr.filter(function (value, index, array) {
//筛选大于100的数组元素，返回一个新数组
return value > 100;
})
console.log(newArr)
</script>
</body>
</html>
algunos()
array.some (función (valor actual, índice, arr))
Nota: Se utiliza principalmente para filtrar la matriz, y el retorno es un valor booleano. Cuando se encuentra el primer elemento de la matriz que cumple la condición, la búsqueda se detiene
- currentValue: el valor del elemento actual en la matriz
- índice: el índice del elemento actual en la matriz
- arr: el objeto de matriz en sí
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>some()方法</title>
</head>
<body>
<script>
var arr = ['pink', 'black', 'red', 'pink', 'pink'];
var flag = arr.some(function (value, index, array) {
//当查找到第一个满足的数组元素后，便停止查找，返回值是一个布尔值
return value = 'pink'
})
console.log(flag)
</script>
</body>
</html>
Caso de producto de consulta
Idea principal
- Renderizar los datos a la página (para cada uno)
- Renderizar datos según el precio (filtro)
- Renderizar datos basados en el nombre del producto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
width: 400px;
border: 1px solid #000;
border-collapse: collapse;
margin: 0 auto;
}
td,
th {
border: 1px solid #000;
text-align: center;
}
input {
width: 50px;
}
.search {
width: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="search">
按照价格查询: <input type="text" class="start"> - <input type="text" class="end"> <button class="search-price">搜索</button> 按照商品名称查询: <input type="text" class="product"> <button class="search-pro">查询</button>
</div>
<table>
<thead>
<tr>
<th>id</th>
<th>产品名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 利用新增数组方法操作数据
var data = [{
id: 1,
pname: '小米',
price: 3999
}, {
id: 2,
pname: 'oppo',
price: 999
}, {
id: 3,
pname: '荣耀',
price: 1299
}, {
id: 4,
pname: '华为',
price: 1999
}, ];
// 1. 获取相应的元素
var tbody = document.querySelector('tbody');
var search_price = document.querySelector('.search-price');
var start = document.querySelector('.start');
var end = document.querySelector('.end');
var product = document.querySelector('.product');
var search_pro = document.querySelector('.search-pro');
setDate(data);
// 2. 把数据渲染到页面中
function setDate(mydata) {
// 先清空原来tbody 里面的数据
tbody.innerHTML = '';
mydata.forEach(function(value) {
// console.log(value);
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + value.id + '</td><td>' + value.pname + '</td><td>' + value.price + '</td>';
tbody.appendChild(tr);
});
}
// 3. 根据价格查询商品
// 当我们点击了按钮,就可以根据我们的商品价格去筛选数组里面的对象
search_price.addEventListener('click', function() {
// alert(11);
var newDate = data.filter(function(value) {
return value.price >= start.value && value.price <= end.value;
});
console.log(newDate);
// 把筛选完之后的对象渲染到页面中
setDate(newDate);
});
// 4. 根据商品名称查找商品
// 如果查询数组中唯一的元素, 用some方法更合适,因为它找到这个元素,就不在进行循环,效率更高]
search_pro.addEventListener('click', function() {
var arr = [];
data.some(function(value) {
if (value.pname === product.value) {
// console.log(value);
arr.push(value);
return true; // return 后面必须写true
}
});
// 把拿到的数据渲染到页面中
setDate(arr);
})
</script>
</body>
</html>
Método de cadena
podar()
El método trim () puede eliminar los espacios en blanco en ambos lados de la cadena
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<input type="text">
<button>点击</button>
<div></div>
<script type="text/javascript">
var input = document.querySelector('input');
var bth = document.querySelector('button');
var div = document.querySelector('div')
bth.onclick = function () {
var str = input.value.trim();
if (str === '') {
alert('内容为空')
} else {
div.innerHTML = str;
}
}
var str2 = ' andy ';
console.log(str2.trim().length)
</script>
</body>
</html>
Método de objeto
Object.keys ()
El método Object.keys () devuelve una matriz con todos los elementos como cadenas
Object.keys () obj
- El efecto es similar a para ... en
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object.keys()</title>
</head>
<body>
<script>
var obj ={
id:1,
name:"尧子陌",
sex:"男"
}
console.log( Object.keys(obj))
</script>
</body>
</html>
Object.defineProperty ()
Definir nuevas propiedades o modificar las propiedades originales: Object.defineProperty (obj, prop, descriptor)
- obj: objeto de destino requerido
- prop: required: definir o modificar el nombre de la propiedad
- descriptor: obligatorio, atributos obligatorios para el atributo de destino
Object.defineProperty () descripción del tercer descriptor
- valor: el valor que se va a modificar
- escribible: si el valor se puede reescribir
- enumerable: si el atributo de destino se puede enumerar
- configurable: si el atributo de destino se puede eliminar o modificar de nuevo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var obj = {
name: "尧子陌",
sex: "男",
age: 18
}
Object.defineProperty(obj, 'name', {
//不允许修改属性
writable: false
})
obj.name = '惊鸿'
console.log(obj);
// 定义新属性或修改属性
Object.defineProperty(obj, 'say', {
value: 'hello',
//目标属性可以被枚举
enumerable: true,
//目表属性不允许删除或修改属性
configurable: false
})
console.log(Object.keys(obj))
</script>
</body>
</html>
