Três maneiras de criar objetos
- Crie um objeto por meio da nova palavra-chave
- Crie objetos por meio de literais
- Crie um objeto por meio do construtor
<!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>
Construtor
Construtor é uma função especial, usada principalmente para inicializar objetos.
Atribua valores iniciais às variáveis de membro do objeto. Em suma, extraia os atributos e métodos públicos no objeto e, em seguida, encapsule o saco nesta função
Precauções
1. O construtor é usado para criar um certo tipo de objeto, e sua primeira letra deve ser maiúscula.
2. Construtor só faz sentido usar com o novo.
nova palavra-chave
1. Crie um novo objeto na memória
2. Deixe isso apontar para este novo objeto
3. Execute o código do construtor, adicione propriedades e métodos a este novo objeto
4. Retorne este novo objeto (o construtor não precisa se atrasar)
Membros estáticos e membros de instância
Membros estáticos: os membros adicionados ao corpo do construtor são chamados de membros estáticos e só podem ser chamados pelo construtor
Membros de instância: os membros de objeto criados dentro do construtor são chamados de membros de instância e só podem ser acessados pelo objeto instanciado.
<!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>
protótipo
O construtor é muito útil, mas um desperdício de memória
Javascript estipula que todo construtor tem uma propriedade prototype, que aponta para um objeto. Podemos definir esses métodos invariáveis no protótipo, de forma que todos os objetos instanciados possam compartilhar esses 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>
O protótipo do protótipo de objeto
Cada objeto terá um atributo _proto_, que aponta para o objeto protótipo no construtor e tem uma relação congruente com ele
<!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>
construtor construtor
Construtor: aponta para o construtor referenciado, o que permite que o objeto protótipo aponte para o construtor novamente.
<!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>
A conexão entre o construtor de objeto de instância de objeto de protótipo
1. O atributo prototype do construtor aponta para o objeto de protótipo do construtor
2. O objeto de instância é criado pelo construtor, e o atributo __proto__ do objeto de instância aponta para o
objeto de protótipo do construtor 3. O atributo de construtor do objeto de protótipo do construtor aponta para O construtor, o atributo construtor do protótipo do objeto de instância também aponta para o construtor
Cadeia de protótipo
Qualquer objeto terá o atributo _proto_, e tudo em js é um objeto. A cadeia conectada pelo atributo _proto_ é chamada de cadeia de protótipo, e o valor final é nulo
O atributo _proto_ do protótipo do construtor aponta para 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 busca de membros js
- Quando acessamos as propriedades e métodos de um objeto, primeiro verificamos se o próprio objeto possui propriedades e métodos.
- Caso contrário, continue a pesquisar a propriedade _proto_ no objeto de protótipo (Object.prototype)
- Caso contrário, continue a pesquisar para cima da mesma maneira até que o valor seja nulo
Simplificando, é encontrar ao longo de uma linha
O presente no objeto de protótipo aponta para o problema
- O this no construtor se refere ao objeto instanciado.
- O this no protótipo se refere ao 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>
Estenda objetos embutidos
O objeto embutido original pode ser estendido e personalizado por meio do objeto de protótipo.
Nota: Objetos integrados, como arrays e strings integrados, não podem ser substituídos por objetos de protótipo;
método call ()
O método call () pode chamar funções, modificar este ponto e passar 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>
herdar
O ES6 não nos fornecia extensão de herança antes. Podemos implementar herança por meio de simulação de construtor + protótipo de objeto, que é chamada de herança composta.
Pegue emprestado o construtor para herdar as propriedades do tipo pai
Princípio básico: por meio de call () para apontar o this do tipo pai para o this do subtipo, o subtipo pode herdar as propriedades do tipo pai
<!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>
Pegue emprestado o objeto de protótipo para herdar o método da classe pai
A ideia é a seguinte
-
Protótipo de subclasse = nova classe pai
-
Porque o objeto instanciado da classe pai abrirá espaço adicional e não afetará o objeto protótipo da classe pai.
-
Reponha o construtor da subclasse para o construtor da subclasse
<!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>
Novo método de matriz ES6
Métodos de iteração (passagem): forEach (), map (), filter (), some (), every ()
para cada()
array.forEach (função (currentValue, index, arr)
- currentValue: o valor do item atual na matriz
- índice: o índice do item atual na matriz
- arr: o próprio objeto de array
<!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>
filtro()
array.filter (funcction (curentValue, index, arr))
Nota: usado principalmente para filtrar a matriz, o retorno é uma nova matriz
- currentValue: o valor do item atual na matriz
- índice: o índice do item atual na matriz
- arr: o próprio objeto de array
<!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>
alguns()
array.some (funcction (curentValue, index, arr))
Observação: é usado principalmente para filtrar a matriz e o retorno é um valor booleano. Quando o primeiro elemento da matriz que atende à condição é encontrado, a pesquisa para
- currentValue: o valor do item atual na matriz
- índice: o índice do item atual na matriz
- arr: o próprio objeto de array
<!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>
Consultar caso de produto
Ideia central
- Renderize os dados para a página (para cada)
- Renderizar dados com base no preço (filtro)
- Renderizar dados com base no nome do produto
<!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 string
aparar()
O método trim () pode remover os espaços em branco em ambos os lados da string
<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 ()
O método Object.keys () retorna uma matriz com todos os elementos como strings
Object.keys () obj
- O efeito é semelhante a para ... em
<!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 ()
Defina novas propriedades ou modifique as propriedades originais: Object.defineProperty (obj, prop, descriptor)
- obj: objeto de destino obrigatório
- prop: obrigatório: definir ou modificar o nome da propriedade
- descritor: obrigatório, atributos obrigatórios para o atributo de destino
Descrição do terceiro descritor Object.defineProperty ()
- valor: o valor a ser modificado
- gravável: se o valor pode ser reescrito
- enumerável: se o atributo de destino pode ser enumerado
- configurável: se o atributo de destino pode ser excluído ou modificado novamente
<!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>
