回顾JavaScript基础——对象

1：创建对象

//var 对象名 = {}
var employee = {
    name : "z",
    age : 20,
    num : 4,
    signIn : function(){
        console.log("创建对象");
    }
}

var employee2 = new object();
employee2.name = "w";
employee2.signIn = function(){
    console.log("创建对象");
}

2：对象属性 key : value

var employee = {
    name : "z",
    age : 20,
    num : 4,
    signIn : function(){
        console.log("创建对象");
    }
}
//访问内部属性 对象名.属性名 对象名["属性名"]
console.log(employee.name);//输出结果：z
console.log(employee["name"]);//输出结果：z

//替换对象的属性,与替换变量值一样，赋值给它一个重新的值就可以
employee.name = "w";
console.log(employee.name);//输出结果：w
employee["name"] = "a";
console.log(employee.name);//输出结果：a

//给对象添加新的属性
employee.sex = "男";
console.log(employee.sex);//输出结果：男

//属性名有-，需要用引号引起来
var employee2 = {
    name : "z",
    "bir-date" : "1989-1-1"
}
console.log(employee2["bir-date"]);//输出结果：1989

3：省略 key

var name = "z";
var employee = {
    //name : name
    name,
    //signIn : function(){}
    signIn(){
        console.log("函数");
    }
}
console.log(employee.name);//输出结果：z
console.log(employee.signIn());//输出结果：函数

4：遍历对象属性 object.keys(对象名)，输出对象的所有属性名（key in 对象名）

var employee = {
    name : "z",
    age : 20,
    num : 4,
    signIn : function(){
        console.log("创建对象");
    }
}
console.log(object.keys(employee));//输出结果 ["name","age","num","signIn"]

for(key in employee){
    console.log(key);//输出结果：name age num aignIn
}

5：删除对象属性（delete 数组名.key)

var employee = {
    name : "z",
    age : 20,
    num : 4,
    signIn : function(){
        console.log("创建对象");
    }
}
delete employee.num;
console.log(employee);//输出结果：[name:"z",age:20,signIn:function(){}]

6：构造函数

function Employee(name,age){
    this.name = name;
    this.age = age;
}
var emp1 = new Employee("z",18);
console.log(emp1);//输出结果：[name:"z",age:18]

7：关键字this

var emp = {
	name : "z",
    age : 20,
    signIn(){
		console.log(this.name+this.age);//输出结果：z20
    }
}
emp.signIn();
//箭头函数和浦普通函数的this指向是不同的，箭头函数内部的this指向包裹他的作用域，普通函数的this指向它所定义的对象本身
emp.empAge = function(){
    console.log(this.name + "abc");//输出结果：zabc
}
emp.empAge();

function Employee(name,age){
    this.name = name;
    this.age = age;
    //箭头函数内部的this，指向着包裹他的作用域,也就是Employee这个构造函数里面的name
    signIn = () =>{
        console.log(this.name);//输出结果：z
    }
}
var emp1 = new Employee("z",20);
emp1.signIn();

8：getter和setters（关键字get读的属性，set写的属性，set定义的函数只能接收一个参数）

var person = {
	firseName : "三",
    lastName : "张"，
    //get具有读的属性
    get fullName(){
        return this.firstName + this.lastName;
    },
	//set 具有写的属性，set定义的函数只能接收一个参数
	set fullName(fullName){
        var [firstName,lastName] = fullname.split(",");//使用,将得到的字符串解构出来 张三->张,三
        this.firstName = firstName;
        this.lastName = lastName;
     }
}
console.log(person.fullName);//输出结果：张三
person.fullName = "李,四";
console.log(person.fullName);//输出结果：李四
console.log(person.firstName,person.lastName);//输出结果：李 四

//在构造函数后面也可以用get和set，不过需要用到Object.defineProperty(要定义的对象,要定义的get和set的属性的名字，要定义的具体的get和set函数)这个方法
function Employee(name,position){
    this,name = name;
    this.position = position;
}
var emp1 = Employee("王五","前端工程师");
Object.defineProperty(emp1 , "info" ,{//emp1指要定义的对象，info指要定义的get和set的属性的名字
    get : function(){
        return this.name + " " + this.position;
    },
    set : function(info){
        var [name,position] = info.split(" ");
        this.name = name;
        this.position = position;
    }
}
console.log(emp1.info);//输出结果：王五 前端工程师
emp1.info = "赵六 后端工程师";
console.log(info.name);//输出结果：赵六
console.log(info.position);//输出结果：后端工程师

9：原型

1）所有 JavaScript 对象都从原型继承属性和方法。

function Person(first, last, age, ) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}
var myFather = new Person("Bill", "Gates", 62);
var myMother = new Person("Steve", "Jobs", 56);
//无法为已有的对象构造器添加新属性：

2）原型继承

所有 JavaScript 对象都从原型继承属性和方法。

日期对象继承自 Date.prototype。数组对象继承自 Array.prototype。Person 对象继承自 Person.prototype。

Object.prototype 位于原型继承链的顶端：

日期对象、数组对象和 Person 对象都继承自 Object.prototype。

3）向对象添加属性和方法

有时，您希望向所有给定类型的已有对象添加新属性（或方法）。

function Person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}
var person1 = new Person("张","三",19);
//可以通过对象名._proto_获取对象的全部属性
console.log(person1._proto_);
person1.prototype.nationality = "English";
console.log(person1._proto_);
//可以通过Object.getPrototypeOg()获取对象的全部属性
console.log(Object.getPrototypeOg(person1))；

4）使用 prototype 属性

JavaScript prototype 属性允许您为构造函数添加新属性：

function Person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}
Person.prototype.nationality = "English";

JavaScript prototype 属性也允许您为构造函数添加新方法：

function Person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}
Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

10：Object.create 让一个对象继承另一个对象的所有属性，并且可以拥有直接的新的属性

function Person(first, last, age) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
}
var person1 = new Person("张","三",20)
//定义一个新的对象继承上面的对象
var son = Object.create(person1)
//输出son这个新的对象的所有属性名
for(key in son){
    console.log(key);//输出结果：first last age
}
//给他新的属性
son.first="李";
son.last="四"
console.log(son);//输出结果：[first:"李",last:"四"]

获取一个对象里面他自己拥有的属性用 Object.getOwnPropertyNames() 方法

console.log(Object.getOwnPropertyNames(son));//输出结果：["first","last"]

11：原型链（ Object.getPrototypeOf() ）

1）每个对象的原型，都还会有一个上层的原型，直到遇到null。这种链式继承下来的原型就构成了原型链

2）javascript里面最顶层的对象是Object

var protoOfSon = Object.getPrototypeOf(son);
console.log(protoOfSon);//输出结果：[first:"张",last:"三",age:20] 这个原型指向了person1
var protoOfSon1 = Object.getPrototypeOf(protoOfSon);
console.log(protoOfSon1);
var protoOfSon2 = Object.getPrototypeOf(protoOfSon1);
console.log(pertoOfSon2);
var protoOfObj = Object.getPrototypeOf(protoOfSon2);
console.log(protoOfObj);//输出结果：null

console.log(Object.getPrototypeOf(Object.prototype));//输出结果：null

12：修改原型指向，改变继承关系

function Mansger(){

}
//给Manager的prototype一个新的属性
Manager.prototype.sex = "男";
//用Object.setprototypeOf()这个方法改变上面定义的protoOfSon的prototype
Object.setprototypeOf(protoOfSonr,Manager.prototype);
console.log(protoOfSon.sex);//输出结果：男
//查看protoOfSon的原型
console.log(Object.PorotypeOf(protoOfSon));//输出结果里只有sex这一个属性，

13：spread操作符（ . . .对象名或者数组名） 把对象的属性或者数组的元素进行分离拓展为单个，与rest操作符相反

var post = {
    name:"z",
    age:20
};
console.log(post);//输出结果：[name:"z",age:20]

var postClone = {...post};
console.log(postClone);//输出结果：[name:"z",age:20]
//上面的两个对象不是一样的
console.log(post === postClone);//输出结果：false

1）添加新的属性

var post1 = {
	...post,
	sex:"男"
};
console.log(post1);//输出结果：[name:"z",age:20,sex:"男"]

2）创建一个有额外元素的新数组

var arr = [1,2,3];
var arrClone = [...arr];
console.log(arrClone);//输出结果：[1,2,3]

//添加元素
var arr3 = [...arr,4,5,6];
console.log(arr3);//输出结果：[1,2,3,4,5,6]

3）在函数里面，如果一个函数接收多个参数，也可以通过数组spread传入参数

function savePost(id,title,content){
    console.log(id,title,content);//输出结果： 2 标题 内容
};
savePost(...[2,"标题","内容"])

14：Destructuring解构操作符 & rest操作符

1）destructuring解构

var post = {
    name:"z",
    age:20,
    sex:"男",
    numNull:null
};
var { name,age } = post;
console.log(name,age);//输出结果："Z" 20

（1）改变属性名

var { name,age:num } = post;
console.log(name,num);//输出结果："z" 20

（2）定义默认值，防止对象没有这个属性或者他的值为undefined

var { name,age,num=18 } = post;
console.log(num);//输出结果：18

（3）null不会被符默认值，null本身就是值

var { name,numNull="nums"} = post;
console.log(numNull);//输出结果：null

（4）数组解构赋值也可以有默认值

var [ a,b=2 ] = [1];
console.log(a,b);//输出结果：1 2

（5）结合数组和对象的解构赋值可以解构复杂的对象结构

var post2 = {
	id: 2,
    title: "标题2"，
    content: "内容",
    comments: [
    	{ userId:1 , comment:"评论1"},
    	{ userId:2 , comment:"评论2"},
    	{ userId:3 , comment:"评论3"}
    ]
};
var { comments:[ , {comment} ] } = post2;
console.log(comment);//输出结果：评论2

（6）解构的key值时一个变量

function getId(idKey,obj){
	let { [idkey]:id } = obj;//obj是要解构的对象
    return id;
};
console.log( getId("userId",{ userId:3 } ) );//输出结果：3

2）rest操作符，与数组相同，把想要属性取出来后，剩余的当一个子对象返回回来

var {comments , ...rest } = post2;
console.log(rest);//输出结果：{id:2,title:"标题2",content:"内容"}

3）解构出来的和rest操作符取出来的也可以做函数的参数

function savePostObj( {id,title,content,...rest} ){
    console.log(id,title,content);//输出结果：1 标题1 内容
    console.log(rest);//输出结果：{num:20}
};
savePostObj( {id:1,title:"标题1",content:"内容",num:20} );

15：值传递和引用传递

1）引用传递

（1）数组参数引用传递

function byReference(arr){
    arr[0] = 5;
};
var array = [1,2,3];
byReference(array);
console.log(array);//输出结果：[5,2,3]

（2）对象参数引用传递

function byReferenceObj(obj){
    obj.title = "标题2";
};
var post = {
    id: 1,
    title: "标题"
};
byReferenceObj(post);
console.log(post);//输出结果：{id:1,title:"标题2"}

（3）字符串比较特殊，虽然他是按引用传递的，但他每次被赋值的时候，都是创建了一个新的String对象，旧的不会改变

function byReferenceStr(str){
    str = "abc";
};
var textStr = "text";
byReferenceStr(textStr);
console.log(textStr);//输出结果：text

2）值传递

function byValue(num){
    num = 10;
    console.log(num);//输出结果：10
};
var textNum = 1;
byValue(textNum);
console.log(textNum);//输出结果：1

16：call,apply,bind都能用来改变函数中this的指向

var emp = {
    id: 1,
    name: "z",
    /*printInfo:{
        console.log("员工姓名：" + this.name);//输出结果：员工姓名：z
    },*/
    /*department:{
        name:"技术部",
        printInfo:{
            console.log("部门名称：" + this.name);//输出结果：部门名称：技术部
        }
    }*/
};
//emp.printInfo();
//emp.department.printInfo();

1）这里面的this指向全局的window对象，里面没有name这个属性，所以没有输出结果

function printInfo:{
        console.log("员工姓名：" + this.name);//输出结果：员工姓名：
};
printInfo();

2）用call这个方法给他指向

var emp = {
    id: 1,
    name: "z",
}
function printInfo:{
        console.log("员工姓名：" + this.name);//输出结果：员工姓名：z
};
printInfo.call(emp);

（1）加上额外的参数

var emp = {
    id: 1,
    name: "z",
}
function printInfo(dep1,dep2,dep3):{
        console.log("员工姓名：" + this.name,dep1,dep2,dep3);//输出结果：员工姓名：z a b c
};
//传递参数直接在后面加上去就可以了
printInfo.call(emp,"a","b","c");

3）使用apply可以直接把这些参数通过一个数组传递进去

printInfo.apply(emp,["a","b","c"]);

4）bind的操作跟call是一样需要传递参数列表，与call不同的是，bind是返回了改变的this之后的新函数，用于在后面去调用，不会立即执行

var emp = {
    id: 1,
    name: "z",
}
function printInfo(dep1,dep2,dep3):{
        console.log("员工姓名：" + this.name,dep1,dep2,dep3);//不会输出任何结果
};
printInfo.bind(emp,["a","b","c"]);

需要将他赋值给一个变量，然后调用这个变量就会出现结果

var empPrintInfo = printInfo.bind(emp,["a","b","c"]);
empPrintInfo();