JavaScript对象(Object)

   日期:2020-11-11     浏览:154    评论:0    
核心提示:JavaScript对象对象(Object)对象的创建使用{}创建使用Object创建使用Function创建使用class关键字对象的原型模型对象(Object)对象由花括号分隔,在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义,也叫json。属性由逗号分隔,空格和折行无关紧要。声明可横跨多行。定义一个对象, 姓名:Keafmd, 年龄:18 ,地址:北京,isEdu:false样例代码:var Ke = { 'name': 'Keafmd',

JavaScript对象

  • 对象(Object)
    • 对象的创建
      • 使用{}创建
      • 使用Object创建
      • 使用Function创建
      • 使用class关键字
    • 对象的原型模型

对象(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>

效果截图:

写作不易,读完如果对你有帮助,感谢点赞支持!
如果你是电脑端,看见右下角的“一键三连”了吗,没错点它[哈哈]

加油!

共同努力!

Keafmd

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服