以下为学习《JavaScript 高级程序设计》》(第 3 版) 跟《ECMAScript 6入门》所做笔记。
引用类型有时候也被称为类或者对象定义。引用对象的值(对象)是引用类型的一个实例。新对象是使用new操作符跟一个构造函数来创建的,如下:
var person = new Object();
创建 Object 对象的两种方法
1. 使用 new 操作符后跟 Object 函数
1 <script> 2 var person = new Object(); 3 person.name = "xiaoxu"; 4 person.age = 50; 5 </script>
2. 使用对象字面量表示法
var person = { //“ { ” 是对象字面量的开始 method: function(){ //方法 return 'hi'; }, name : "xiaoxu", //name是属性,xiaoxu是name属性的值。用逗号来分隔不同的属性 "age": 50, //属性名也可以使用字符串。数值属性名会自动转换成字符串 5: true //对象最后一个属性后不需要添加逗号 }
在 ES6 中,属性跟方法可以简洁表示。使用字面量方式定义对象(使用大括号)时,ES5 只允许用标识符做对象的属性名,ES6 允许用表达式作为对象的属性名(即把表达式放在方括号内)。
const name = 'xiaoxu'; const person = { //属性简写 name, //等同于 name:name, //方法简写 method(){ //等同于 method: function(){...} return 'hi'; }, //ES6 允许表达式作为对象的属性名,即把表达式放在方括号内 ['a'+'bc']: 123 } console.log(person); //输出:{ name: 'xiaoxu', method: [Function: method], abc: 123 }
注意:简写的对象方法不能用作构造函数,会报错。
使用对象字面量语法能够给人封装数据的感觉。使用对象字面量也是向函数传递大量可选参数的首选方式。
例如:
1 <script> 2 function displayInfo(args){ 3 var output = ""; 4 if(typeof args.name == "string"){ 5 output += "Name:" + args.name + " "; 6 } 7 if(typeof args.age == "number"){ 8 output += "Age:" +args.age + " "; 9 } 10 alert(output); 11 } 12 13 displayInfo({ 14 name : "xiaoxu", 15 age : 29 16 }); 17 18 displayInfo({ 19 name : "daxu" 20 }); 21 </script>
页面效果:
弹出窗口,点击确定之后,又弹出一个窗口。
访问对象属性
1 <script> 2 var person = { 3 name : "xiaoxu" 4 } 5 console.log(person.name); //点表示法 6 console.log(person["name"]); //方括号表示法 7 8 //如果属性名包含会使语法错误的字符,或者属性名使用的是关键字或者保留字,也可以使用方括号表示法 9 person["first name"] = "Nico"; 10 console.log(person["first name"]); 11 </script>
输出: