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 《五子飞》游戏实现(六)鼠标响应与多重选择
上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...
随机推荐
- 用js来实现页面的换肤功能(带cookie记忆)
用js来实现页面的换肤功能 js实现换肤功能的实现主要是通过利用js控制CSS来实现的.大致的实现原理是这样的, 1.先定义一个页面基本样式style.css来确定div的宽高等属性,使得整个页面的D ...
- 结合swiper使用图片懒加载
本人渣渣一枚,技术一般,记录下笔记,大神勿喷,可以留下优化建议,谢谢 最近刚刚做了个展示型的网站,使用swiper搭的框架,因为图片比较多,所 以首次加载稍微有些慢,虽然压缩过了,但是尽可能的优化吧, ...
- HttpURLConnection从网上获取Json数据并解析详解
HttpURLConnection从网上获取Json数据并解析 1.HttpURLConnection请求数据的步骤 (1)构造一个URL接口地址: URL url = new URL("h ...
- Bootstrap入门(十一)组件5:输入框组
Bootstrap入门(十一)组件5:输入框组 1.为其中添加第一个输入框 2.添加额外的元素 3.为用户提供标识 4.改变输入框的尺寸 5.为额外添加多选/单选框 6.与按钮结合 7.与下拉菜单 ...
- loadrunner controller:设置多个load generator
下面讲一下如何使用多台电脑进行负载测试. 1) 打开load generator,如图所示默认已添加了我们本地的Generator: 2) 点击"Add. ...
- localStorage的黑科技-js和css缓存机制
一.发现黑科技的起因 今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上.然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术. 呵呵,以下勾起了我侦探的欲 ...
- 关于pandas精度控制
最近使用pandas处理一批数据,数据中包含几个columns,它们的数据精度,例如 3.25165,1451684684168.0,0.23 处理完之后保存csv时发现,1451684684168. ...
- POJ2774(二分+哈希)
Long Long Message Time Limit: 4000MS Memory Limit: 131072K Total Submissions: 27234 Accepted: 11 ...
- [html]关于html标签的一些总结
以下内容纯属个人对项目细节的总结,因为只是为了自己回顾方便,所以比较杂乱. 1.img 如果不指定img的高度和宽度,则img显示的是原图片的大小:如果只指定了高度和宽度中的一者,则为指定的一者等比例 ...
- 面向UI编程:ui.js 1.0 粗糙版本发布,分布式开发+容器化+组件化+配置化框架,从无到有的艰难创造
时隔第一次被UI思路激励,到现在1.0的粗糙版本发布,掐指一算整整半年了.半年之间,有些细节不断推翻重做,再推翻再重做.时隔今日,终于能先出来个东西了,这个版本很粗糙,主体功能大概能实现了,但是还是有 ...