回顾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();