//1、创建对象 字面量创建对象 里面用键值对的方式 key:value多个用逗号隔开
var employee = {
name: "lily", //key的名字有两个单词拼接的情况使用驼峰命名法
age: 30,
position: "前端工程师",
signIn: function() {
console.log("打卡上班");
}
};
var employee2 = new Object(); //利用new Object创建对象
employee2.name = "coco";
employee2.age = 30;
employee2.position = "前端工程师";
employee2.signIn = function() {
console.log("coco打卡");
};
//对象属性 每个对象里的键值对都是对象的属性，如果键值对的值是函数也叫做对象的方法
console.log(employee.name); //访问对象属性的2种方式
console.log(employee["age"]); //[]里必须是一个字符串
employee.name = "张五"; //更改key属性值
console.log(employee.name);
employee['name'] = "张六"; //用[]也可以更改
console.log(employee.name);
//省略key 用字面值创建对象的时候，如果对象的属性值是一个变量，并且key和变量的名字是一样的，就可以省略key
var name = "张🐟";
var employee3 = {
// name: name, 名字一样可以省略key
name,
signIn() { //函数也可以省略key ,直接给函数命名
console.log("张🐟打卡");
}
};
console.log(employee3.name);
console.log(employee3.signIn());
console.log(employee3); //对象打印出来是对象
//2、遍历对象中所有的属性
console.log(Object.keys(employee3)); //用Object.keys(对象名) 返回的是数组
//语法：for (var 变量 in 对象) { }
for (key in employee) {
console.log(key);
}
//3、删除对象属性 利用delete关键字
delete employee.name //这里删除了employee对象的name属性
console.log(employee);
//4、构造函数 是另一种创建对象的方式 与其他2种方式不同的是，使用构造函数可以预先定义好对象的默认属性，然后用new关键字创建实例。 构造函数的命名首字母要大写与其他函数分开
function Yuangon(name, age) {
this.name = name;
this.age = age;
}
var yg = new Yuangon("李四",25);
console.log(yg);
//5、get和set
var person = {
firstName: "三",
lastName: "张",
get fullName() {
return this.lastName + this.firstName;
},
set fullName(fullName) {
let [lastName, firstName] = fullName.split(",");
this.lastName = lastName;
this.firstName = firstName;
}
};
console.log(person.fullName);
person.fullName = "李,四";
console.log(person.fullName);
//6 对象 原型
//构造函数通过原型分配的函数是所有对象所共享的。在JavaScript中，每一个构造函数都有一个prototype对象
//我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。可以避免浪费内存。
//注意：在构造函数中，一般情况下，公共的属性定义到构造函数里面，公共的方法定义到原型对象里面。
//对象原型__proto__ ：对象都会有一个属性_proto_指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为有__proto__原型的存在。
function Epe(name,position) {
this.name = name;
this.position = position;
}
Epe.prototype.signIn = function() { //prototype 原型对象可以让其他对象继承，
console.log(this.name + "打卡成功");
}
var yuangon1 = new Epe("lihua","前端工程师");
console.log(yuangon1);
yuangon1.signIn();
//7 Object.create 可以让一个对象继承另一个对象，新的对象可以有 继承对象的所有属性 还能有自己的属性
console.clear();
console.log(yuangon1);
var manager = Object.create(yuangon1); //继承了Eqe对象的属性
console.log(manager);
for (mar in manager) {
console.log(mar);
}
console.log(Object.getOwnPropertyNames(manager)); //获取一个对象自己所拥有的属性 Object.getOwnPropertyNames()
//8、原型链 是说每个对象的原型都还会有上层的原型，直到遇到none，这种链式继承下来的原型就构成了原型链。
//9、spread操作符 : ...复制的对象名 来表示 相当于克隆一个对象
var post = {
id: 1,
title: "标题",
content: "这是内容"
};
console.log(post);
var postClone = {
...post, //把post对象的属性给了postClone对象
author: "风华" //也可以添加新的属性
};
console.log(postClone);
var arr = [1,2,3]; //也可以克隆数组
var arrClone = [...arr]; //克隆了一个新数组 ，也可以给数组添加元素
console.log(arrClone);
function writeBook(id, title, content) { //在函数中如果一个函数接收多个参数 也可通过数组spread
console.log("文章是：", id, title, content);
}
// writeBook(...[2,'标题','内容']);
writeBook(2,'标题','内容');
//10、destructuring 解构赋值 书写格式 var {对象属性，对象属性} = 对象名; & rest 如果我想把解构完的对象 剩余的属性在返回一个数组用rest操作符 格式：...变量名。这2个操作符在数组和对象中都可以使用
var post1 = {
id: 1,
title: "标题",
content: "内容"
};
var {id,title} = post1; //解构了post1对象的id,title属性
console.log(id,title); //打印是1 "标题"
console.log(post1); //解构完不改变原对象的属性
var {id, title:headline} = post1; //属性名要和对象里的一致，如果想换成别的，属性名：更改后的名字 就可以
console.log(id, headline); //打印的时候是更改后的名字
var {id, comments = "没有评论" } = post1; //也可以定义默认值，comments就是定义的默认值。 null不会被赋默认值。
console.log(id, comments);
var [a, b=2] = [1]; //数组也可以被赋默认值，这里解构了1 ， b赋了默认值
console.log(a,b); //输出为 1，2
var {id, title, ...rest} = post1; //解构出了id，title. 剩下的属性给了变量rest
console.log(rest);
//对象 call & apply & bind
//都可以改变函数中this的指向
var emp = {
id: 1,
name: '风华',
printInfo() {
console.log("员工姓名:" + this.name);
},
department: {
name: "技术部",
printInfo() {
console.log("部门的名称:" + this.name);
}
}
};
emp.printInfo();
emp.department.printInfo();
var emp = {
id: 1,
name: '风华',
};
function printInfo(dep,dep1) {
console.log("员工姓名:" + this.name, dep, dep1);
}
printInfo(); //此时this的指向是window
printInfo.call(emp, "技术部", "事业部"); //此时this指向了emp
printInfo.apply(emp,["技术部", "事业部"]);// 与call的不同点是apply传参可以用数组
//bind 改变指向之后会返回一个新的函数，不会立即执行，
var p = printInfo.bind(emp, "技术部", "事业部");
p(); //调用了函数
