JavaScript对象(Object)
【摘要】
JavaScript对象
对象(Object)对象的创建使用{}创建使用Object创建使用Function创建使用class关键字 对象的原型模型
对象(Object)
对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义，也叫json。 属性由逗号分隔，空格和折行无关紧要。声明可横跨多行。
...
对象(Object)
对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义，也叫json。
属性由逗号分隔，空格和折行无关紧要。声明可横跨多行。
定义一个对象, 姓名：Keafmd, 年龄：18 ，地址：北京，isEdu:false
样例代码：
var Ke = { 'name': 'Keafmd', 'age': 18, address: '北京', isEdu:false
}
console.log(Ke)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
完整代码：
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
效果截图：
对象的创建
使用{}创建
var person = { name : 'Keafmd', sayHi:function(){ console.log('hi, my name is :'+this.name) }
};
- 1
- 2
- 3
- 4
- 5
- 6
样例代码：
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
效果截图：
使用Object创建
var p = new Object();
p.name = 'Keafmd';
p.age = 18;
console.log(p);
- 1
- 2
- 3
- 4
- 5
样例代码：
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
效果截图：
使用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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
样例代码：
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
效果截图：
使用class关键字
class Human{ constructor(name) { this.name = name; } sayHi(){ console.log('我是： '+this.name); }
}
var h1 = new Human('Keafmd');
h1.sayHi()
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
样例代码：
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
效果截图：
对象的原型模型
通过对象可以给对象扩展字段（属性、方法）
如果想同一个类型，都添加属性，则需要用到原型 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
效果截图：
写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]
加油！
共同努力！
Keafmd
文章来源: keafmd.blog.csdn.net，作者：牛哄哄的柯南，版权归原作者所有，如需转载，请联系作者。
原文链接：keafmd.blog.csdn.net/article/details/109582129
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）