美文网首页
【融职培训】Web前端学习 第3章 JavaScript基础教程

【融职培训】Web前端学习 第3章 JavaScript基础教程

作者: lmonkey_01 | 来源:发表于2020-06-16 14:05 被阅读0次

    一、对象的基本概念

    在现实生活中,所有东西都可以看成对象,比如一台电脑,一个房子,一只猫,一个人,对象有他自己的属性,比如电脑有颜色,房子有尺寸,猫和人都有年龄。

    在JavaScript中,对象是属性的集合,他也是一种数据类型。

    二、自定义对象

    我们可以通过一对花括号来创建一个对象

    如下所示:

    1varobj = {};

    在花括号中,我们可以为对象定义属性,下面我们来写一个猫的对象

    示例代码如下:

    1varcat = {  2//定义一个对象cat,它有两个属性,name和age3name:"喵喵",4age:25}6//有两种方法可以获取到对象的属性值:1、对象名.属性名;2、对象名["属性名"]7console.log(cat.name);    8console.log(cat["name"]);

    三、方法

    通过上面的例子我们可以知道name的属性值是字符串类型,age的属性值是数值类型。其实对象的属性值可以是任何数据类型,甚至可以是函数,如果对象的属性值是函数,那么我们叫这个属性为这个对象的方法

    示例代码如下:

    1varcat = {2name:"喵喵",3age:2,4sayName:function(){5console.log("我是喵喵");6    }7}8cat.sayName();

    上面的代码可以在控制台输出“我是喵喵”,其中sayName是cat的方法。

    方法简写

    1varcat = {2name:"喵喵",3age:2,4    sayName(){5console.log("我是喵喵");6    }7}8cat.sayName();

    四、this关键字

    在上面的例子中,我们可以给cat的那么属性重新赋值,代码如下

    示例代码如下:

    1varcat = { 2name:"喵喵", 3age:2, 4sayName:function(){ 5console.log("我是喵喵") 6    } 7} 8cat.name = "小白"; 9console.log(cat.name);//输出"小白"10cat.sayName();//输出"我是喵喵"

    因为猫的名字已经改变,但是sayName方法里面的名字并没有一同变化,我们可以通过this关键字实现修改了名字,方法里面的名字也会改变。

    在对象的方法中使用this,可以指向这个对象本身,

    示例代码如下:

    1varcat = { 2name:"喵喵", 3age:2, 4sayName:function(){ 5console.log("我是"+this.name) 6    } 7} 8cat.sayName();//输出“我是喵喵” 9cat.name = "小白";10console.log(cat.name);//输出"小白"11cat.sayName();//输出“我是小白”

    五、方法传参

    给对象的方法传递参数和给函数传递参数是一样的,下面我们来定义一个会算数的猫

    示例代码如下:

    1varcat = { 2name:"喵喵", 3age:2, 4sayName:function(){ 5console.log("我是"+this.name) 6    }, 7count:function(num1,num2){ 8console.log(num1+num2); 9    }10}1112cat.sayName();13cat.count(10,20);

    我们在之前代码的基础上,有添加了一个count方法可以让猫可以计算两个数的加和,我们只要传入实参,猫就能计算结果。

    六、对象展开运算符

    1let xiaoMing = {name:"小明",age:2}2let superXiaoMing = {weight:"1000kg",fly:true}3let superHero = {4    ...xiaoming,5    ...sukperXiaoming6}7console.log(superHero)

    七、课后练习

    定义一个对象dog,实现功能如下:

    具有一个name属性名为Doggy。

    具有一个number属性,初始值为0.

    具有一个counting(数数)方法,每次执行方法时,number属性会增加1。

    【融职教育】在工作中学习,在学习中工作

    相关文章

      网友评论

          本文标题:【融职培训】Web前端学习 第3章 JavaScript基础教程

          本文链接:https://www.haomeiwen.com/subject/muzlxktx.html