JS入门(五)
前面提了很多JS的基础知识,像一些基本输出语句啊,JS中的关键字呐。然后是JS中的一些循环,数组之类的,在之后就是函数了。这些都是在JS中很基础的一些东西,在我刚开始学JS的时候,这些我就觉得很简单,都是一笔带过的。但在我学到后来的时候,包括接触了一些流行框架,和Ajax的时候,我发现,很多知识点都是似懂非懂的,感觉好像看到过,可是做起来却一点都不会。这都是基础不扎实的表现,只能看着别人的代码跟着打,自己做着没有思路,所以基础很重要。好了,下面就开始进入正题了。
首先就要讲讲我之前在一篇介绍JS一些常用内置对象文章里提过字符串的属性和方法,但我们知道,只有对象才有属性和方法。字符串是简单数据类型,是没有属性和方法的。那为什么会有字符串的属性和方法呢?这是因为字符串在调用属性或是方法的时候,会先将基本数据类型包装成对象。比如我们定义了一个字符串:
var str=”abc”;
在我们调用字符串方法的时候,生成一个临时的对象;
var str=new String(“abc”;)
当调用完成之后,将临时对象立马销毁。
上面讲了那么多,可能没有基础的人看的话可能会有点懵逼,那就是什么是对象???
之前我发的文章中,就有一篇是关于内置对象的。在JS中有若干内置对象,比如Math对象,Date对象,Array对象,也包括字符串(String)对象。这些都是JS给我们提供的内置对象,除此之外,我们还可以创建我们自己的对象。当然,讲了这么多,可能还是会有人有点懵逼。那么,我们就用我们身边的实际事物来打比方。比如车,直接拿车来说并不是对象,但是如果我说我去年新买的那辆车,这辆车就可以做为一个对象,对象一定是具体到一样事物。然后我的车是红色的,有四个轮子,座椅是真皮的,这就是我这辆车的属性。然后我这辆车能开出去,能开空调,这就是我的车拥有的能力也就是方法。所以到了程序中,我新买的这辆车就是对象,它的颜色,样式就是对象的属性,我的车能开空调就是对象的方法。这么一说,对象也就很清晰了,对象就是拥有一系列属性和方法的特殊数据类型而已。既然知道了对象是什么,那就看看怎么定义对象,最简单的方法就是直接用字面量的方式定义对象。
var o= new Object();
o.name = "张三";
o.age = 22;
o.sex = "男";
o.sayHi = function(){
console.log("大家好,我的名字是:"+ o.name+",我的年龄是:"+ o.age+",我是"+ o.sex+"生");
};
console.log(o.name);
console.log(o.age);
o.sayHi();
我们可以用new关键字来定义一个新的对象。之后我们只要用对象加一个点之后再跟属性名的方式就可以直接给对象的属性赋值了,比如上述代码,我们定义了一个名为o的对象,它的name属性值为张三。他的age属性值为22。另外,我们还可以为对象添加方法。这里我们只需要用o加一个点再加方法名,之后直接跟一个匿名函数就好了,不过在对象中,我们不叫匿名函数,而是叫方法,现在o这个对象就有一个sayHi的方法。
定义好了对象之后,要怎么输出对象的属性值跟方法呢?这个也很简单,只要直接用对象名加个点之后再跟上属性名就好了。而调用方法则执行用对象名加个点,之后再跟一个方法名和括号就好了。上述代码在控制台的输出结果是:
这样我们就创建了一个我们自定义的对象了。当然,上面的创建方式也可以写成另一种形式。:
var o = {
name:"张三",
age:20,
address:"上海市",
sex:"男",
// sayHi:function(){
// console.log("大家好,我的名字是:"+ this.name+",我的年龄是:"+ this.age+",我是"+ this.sex+"生");
// }
sayHi:function(){
console.log("大家好,我的名字是:"+ o["name"]+",我的年龄是:"+ o["age"]+",我是"+ this.sex+"生");
}
};
在这里,我用了另一种方式来创建了一个对象,它是用一个大括号把对象所有的属性跟方法都括起来了,属性和属性值之间用:隔开,每条属性之间则用逗号隔开。并且,对象属性的调用有另外一种形式,也就是对象名加一个中括号,中括号里则是用双引号引起来的属性值,相比于之前那种属性值调用的方式来时,这种方式会更加灵活,只不过,之前那种书写起来更方便。所以说,两种调用方法各有各的好处跟坏处,对于初学者来说只要掌握他有这么两种书写方式就好了。
说实在的,如果我是编写JS语言的人的话,可能编写到这就差不过了。很可惜,我不是,伟大的程序猿总是有着更深层次的思考,那就是,这里我就创建了一个对象,如果只能写入一个人的信息,那如果我要写入很多个人的信息呢,也想这样子一个个写吗?这时候,就有了用另一种方法来创建很多个对象,那就是构造函数。先来看看用构造函数是怎么来创建对象吧:
function Student(name,sex,age){ //首字母大写,标明是一个函数,但是是构造函数,用来创建对象
this.age=age;
this.sex = sex;
this.name = name; // this指代当前创建出来的对象
this.sayHi = function(){
console.log("我叫"+this.name+",我今年"+this.age+",我是"+this.sex+"生");
};
ls.sayHi();
var xm = new Student("小明","男",12);
xm.sayHi(); //谁调用,this就指代谁,始终指向当前对象
这段代码,跟用对象创建字面量很像,但又有些不同的地方,首先有疑惑的就是this是什么?在这里,this值的就是当前创建出来的对象。也就是说,谁调用这个构造函数,那么this就指代谁。可能这么说有些抽象,我们就创建一个对象
var ls = new Student("李四","男",25); // 构造函数可以创建对象并返回
在这里,我们定义了一个ls的变量,并且传了三个参数进来,这时候,this指代的就是ls这个对象。所以我们可以把代码看成是
var ls = new Object();
ls.age = 25;
ls.sex = "男";
ls.name = "张三";
ls.sayHi = function () {
console.log("我叫" + this.name + ",我今年" + this.age + ",我是" + this.sex + "生");
}
在创建了构造函数之后,我们在创建有相同属性和方法的对象的时候就不用每次都写这么多代码了。在用构造函数创建对象的时候,我们还多了一个新的关键字,就是new,不过也不能说新关键字,因为在我们创建内置对象的时候,其实已经用到过new了,现在就说说new的作用,它创建了一个空的对象,并让this指向这个对象,然后再执行构造函数中的代码,给当前空对象this来设置属性和方法。最后,再将this这个当前对象返回。这样,用构造函数批量创建对象就完成了。这里,还有一些值得注意的地方,就是构造的函数名一般都是首字母大写。这样,我们看到构造函数就能直接知道这个是构造函数,这样就能跟普通的函数区分开来了。
JS入门(五)的更多相关文章
- React.js入门笔记
# React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...
- Ember.js入门教程、博文汇总
第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...
- 极简 Node.js 入门 - 4.5 双工流
极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...
- openresty 前端开发入门五之Mysql篇
openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...
- 1. web前端开发分享-css,js入门篇
关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...
- JS入门之ActiveXObject对象(转载)
JS入门之ActiveXObject对象 此对象提供自动化对象的接口. function ActiveXObject(ProgID : String [, location : String] ...
- HTML5+JS 《五子飞》游戏实现(一)规则
很久没写文章了,这个游戏其实已经写了有段时间了,一直没有完善,赶在新年之际,分享给大家. 该<五子飞>游戏,不是平常大家所说的<五子棋>,这个玩法简单,是我们老家儿时常玩的一种 ...
- HTML5+JS 《五子飞》游戏实现(八)人机对战
要想实现人机对战,就必须让电脑自动下棋,而且要知道自动去查找对方的棋子,看看有没有可以挑一对的,有没有可以夹一个的,这样下起来才有意思. 当电脑用户下完棋后,电脑应立即搜索用户的棋子,然后如果没有被吃 ...
- HTML5+JS 《五子飞》游戏实现(七)游戏试玩
前面第一至第六章我们已经把<五子飞>游戏的基本工作都已经讲得差不多了,这一章主要是把所有的代码分享给大家,然后小伙伴们也可以玩一玩. 至于人机对战的我们放到后面讲进行分析. 试玩地址:ht ...
- HTML5+JS 《五子飞》游戏实现(六)鼠标响应与多重选择
上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...
随机推荐
- LNMP 快速安装
网址是:http://lnmp.org/install.html 值得注意的是:它基本上把所有的扩展都装上了,有点冗余 安装完成后,根目录的位置是 /home/wwwroot/default LNMP ...
- 【转】 如何提高自己的acm个人能力
2011-05-17 21:26 1429人阅读 评论(0) 收藏 举报 算法网络blog八卦游戏读书 转载自 简单de数字 最终编辑 fading_code by zfy0701 本来以为HNU ...
- JS base64 加密和解密
/*** * 加密 base64encode(utf16to8(str)) * 解密 utf8to16(base64decode(str)) * * */ var base64EncodeChars ...
- 数据库设计的误区—>CHAR与VARCHAR
字符型字段是数据库表中最常见的字段,而字符型字段又分为定长和变长两种.一般来说,VARCHAR类型用于存储内容长度变化较大的数据,CHAR类型用于存储内容长度没有变化或变化不大的数据. 在数据的内部存 ...
- 游戏开发之在UE4中编写C++代码控制角色
当你运行我们上次做完的项目,你可能会意识到我们移动的摄像机还是默认的那个摄像机,这个默认的摄像机可以自由飞翔.这一节,我们要使得开始的角色是我们的一个Avatar类的实例对象,并且使用键盘控制我们的角 ...
- 法国总统放大招,用“分身术”竞选总统 全息3d 网
编辑:大熊 [摘要]法国总统采用全息技术实现"分身"演讲,可谓是一次演讲,全面覆盖! 全息3d网讯:众所周知,欧美国家的总统是通过公开竞选得到的,所以能更直接.更广泛的近距离接触民 ...
- C++编程练习(2)----“实现简单的线性表的链式存储结构“
单链表采用链式存储结构,用一组任意的存储单元存放线性表的元素. 对于查找操作,单链表的时间复杂度为O(n). 对于插入和删除操作,单链表在确定位置后,插入和删除时间仅为O(1). 单链表不需要分配存储 ...
- linq左连接查询加上into后怎么查询右表是否为空
//判断右表是否为空并为映射表进行赋值标志var query=from q in product join m in favProduct on q.Name equals m.Name into t ...
- 详解Google Chrome浏览器(操作篇)(一)
开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...
- 5. UITest测试总结
1. 什么是Mock 当我们在做单元测试的过程中,为了保持测试又短又快和测试的隔离性,希望尽可能少地去实例化一些具体的组件.在现在面向对象的系统中,被测试的对象很可能会依赖于几个其他的对象,这时候我们 ...