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 《五子飞》游戏实现(六)鼠标响应与多重选择
上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...
随机推荐
- Eclipse 使用说明
2. 使用技巧 2.1. Eclipse 打开文件所在文件夹 2.2. Mac 安装Eclipse 2.3. Eclipse 安装插件 2.4. Eclipse 工具栏不见了 2.5. Eclipse ...
- thinkphp 配置项总结
'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...
- mongoDB查询及游标
find文档 1.find简介 使用find查询集合中符合条件的子集合 db.test.blog.find(); 类似于sql查询 select * from test.blog 上面的查询是返回多有 ...
- #最小生成树# #kruskal# ----- OpenJudge丛林中的路
最小生成树 一个有 n 个结点的连通图的生成树是原图的极小连通子图,且包含原图中的所有 n 个结点,并且有保持图连通的最少的边.最小生成树可以用kruskal(克鲁斯卡尔)算法或prim(普里姆)算法 ...
- HTTP的GET方法模拟
进行GET方法的测试 #telnet[ ]10.1.1.11[ ]80 GET[ ]/[ ]HTTP/1.0 [两个回车] HEAD[]/[]HTTP/1.0[回车回车] http://www.cnb ...
- HttpSesstionActivationLIstener示例
HttpSesstionActivationLIstener示例: http://www.cnblogs.com/xdp-gacl/p/3969249.html 钝化的session会已session ...
- Docker,容器,虚拟机和红烧肉
Docker火了,有多火你自己看看下面的统计数据就知道了 在发布4个月的时间里,下载量就超过50000次,github上收到超过4000个star,涌现了超过100个贡献者,并且有超过150个项目和超 ...
- react-router 学习笔记
前言: 本文为个人学习react-router的总结.包括路由基础配置,跳转,权限管理,组件与路由配置的关系,代码分割.欢迎交流指导. 一.路由基础 1.路由配置 & 显示路由组件的view( ...
- BZOJ-2150部落战争(最小路径覆盖)
2150: 部落战争 Time Limit: 10 Sec Memory Limit: 259 MB Description lanzerb的部落在A国的上部,他们不满天寒地冻的环境,于是准备向A国 ...
- 深圳尚学堂:Android APP的测试流程
每一个新开发的软件都避免不了测试,我在这里总结了一些Android系统的移动端APP测试的一些测试流程,希望可以给大家一些帮助. 1. UI 测试App主要核ui与实际设计的效果图是否一致:交互方面的 ...