对象(Object)
对象由花括号分隔,在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义,也叫json。
属性由逗号分隔,空格和折行无关紧要。声明可横跨多行。
定义一个对象, 姓名:Keafmd, 年龄:18 ,地址:北京,isEdu:false
样例代码:
var Ke = { 'name': 'Keafmd', 'age': 18, address: '北京', isEdu:false } console.log(Ke)
完整代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> var Ke = { 'name': 'Keafmd', 'age': 18, address: '北京', isEdu:false } console.log(Ke) </script> </head> <body> </body> </html>
效果截图:
对象的创建
使用{}创建
var person = { name : 'Keafmd', sayHi:function(){ console.log('hi, my name is :'+this.name) } };
样例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var person = { name : 'Keafmd', sayHi:function(){ console.log('hi, my name is :'+this.name) } }; console.log(person) person.sayHi() </script> <title></title> </head> <body> </body> </html>
效果截图:
使用Object创建
var p = new Object(); p.name = 'Keafmd'; p.age = 18; console.log(p);
样例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> var p = new Object(); p.name = 'Keafmd'; p.age = 18; console.log(p); </script> <title></title> </head> <body> </body> </html>
效果截图:
使用Function创建
function Student(){ this.name = ''; this.age = 0; } var stu1 = new Student(); stu1.name = "Keafmd"; stu1.age = 18; stu1.address = '哈尔滨'; console.log(stu1); var stu2 = new Student(); console.log(stu2);
样例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function Student(){ this.name = ''; this.age = 0; } var stu1 = new Student(); stu1.name = "Keafmd"; stu1.age = 18; stu1.address = '哈尔滨'; console.log(stu1); var stu2 = new Student(); console.log(stu2); </script> <title></title> </head> <body> </body> </html>
效果截图:
使用class关键字
class Human{ constructor(name) { this.name = name; } sayHi(){ console.log('我是: '+this.name); } } var h1 = new Human('Keafmd'); h1.sayHi()
样例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> class Human{ constructor(name) { this.name = name; } sayHi(){ console.log('我是: '+this.name); } } var h1 = new Human('Keafmd'); h1.sayHi() </script> <title></title> </head> <body> </body> </html>
效果截图:
对象的原型模型
通过对象可以给对象扩展字段(属性、方法)
如果想同一个类型,都添加属性,则需要用到原型 prototype
样例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function Student(){ this.name = ''; this.age = 0; } var s1 = new Student(); //给对象扩展方法 // s1.sayHi =function(){ // console.log('打招呼') // } //给原型扩展 Student.prototype.sayHi = function(){ console.log('打招呼') } s1.sayHi(); var s2 = new Student(); s2.sayHi(); </script> </head> <body> </body> </html>
效果截图: