前面提了很多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入门(五)的更多相关文章

  1. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  2. Ember.js入门教程、博文汇总

    第一章 对象模型 Ember.js 入门指南——类的定义.初始化.继承 Ember.js 入门指南——类的扩展(reopen) Ember.js 入门指南——计算属性(compute properti ...

  3. 极简 Node.js 入门 - 4.5 双工流

    极简 Node.js 入门系列教程:https://www.yuque.com/sunluyong/node 本文更佳阅读体验:https://www.yuque.com/sunluyong/node ...

  4. openresty 前端开发入门五之Mysql篇

    openresty 前端开发入门五之Mysql篇 这章主要演示怎么通过lua连接mysql,并根据用户输入的name从mysql获取数据,并返回给用户 操作mysql主要用到了lua-resty-my ...

  5. 1. web前端开发分享-css,js入门篇

    关注前端这么多年,没有大的成就,就入门期间积累了不少技巧与心得,跟大家分享一下,不一定都适合每个人,毕竟人与人的教育背景与成长环境心理活动都有差别,但就别人的心得再结合自己的特点,然后探索适合自己的学 ...

  6. JS入门之ActiveXObject对象(转载)

    JS入门之ActiveXObject对象   此对象提供自动化对象的接口.   function ActiveXObject(ProgID : String [, location : String] ...

  7. HTML5+JS 《五子飞》游戏实现(一)规则

    很久没写文章了,这个游戏其实已经写了有段时间了,一直没有完善,赶在新年之际,分享给大家. 该<五子飞>游戏,不是平常大家所说的<五子棋>,这个玩法简单,是我们老家儿时常玩的一种 ...

  8. HTML5+JS 《五子飞》游戏实现(八)人机对战

    要想实现人机对战,就必须让电脑自动下棋,而且要知道自动去查找对方的棋子,看看有没有可以挑一对的,有没有可以夹一个的,这样下起来才有意思. 当电脑用户下完棋后,电脑应立即搜索用户的棋子,然后如果没有被吃 ...

  9. HTML5+JS 《五子飞》游戏实现(七)游戏试玩

    前面第一至第六章我们已经把<五子飞>游戏的基本工作都已经讲得差不多了,这一章主要是把所有的代码分享给大家,然后小伙伴们也可以玩一玩. 至于人机对战的我们放到后面讲进行分析. 试玩地址:ht ...

  10. HTML5+JS 《五子飞》游戏实现(六)鼠标响应与多重选择

    上一章我们提到了如果有多条线上的棋子可以被吃掉,那么游戏需要提示用户,让用户选择吃哪条线上的.另外因为是网页游戏,所以一定要实现鼠标单击棋子可以进行操作. 当鼠标移动棋子上面后,切换鼠标指针为手形,移 ...

随机推荐

  1. Hibernate懒加载的三种解决方案

    Hibernate懒加载的两种解决方案: 1.Hibernate.initialize(代理对象) 2.在*.hbm.xml映射文件中添加lazy="false"属性 3.使用op ...

  2. Nginx之RTMP

    1. RTMP协议介绍 RTMP(Real Time Messaging Protocol)实时消息传送协议是Adobe Systems公司为Flash播放器和服务器之间音频.视频和数据传输开发的私有 ...

  3. java中的静态代理和动态代理,入门整理

    静态代理和动态代理主要解决的问题是:在直接访问对象时带来的问题,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为委托类预处理消息,过滤消息并转发消息,以及进行消息被委托类执行后的后 ...

  4. ubuntu下编译java程序

    ubuntu下编译java程序 首先需要安装jdk,并配置好相应环境变量 下面以简单的HelloWorld为例 文件名为HelloWorld.java java代码: public class Hel ...

  5. linux 中用python实现终端命令行命令

    在python代码中实现和在终端中输入的命令行一样的效果,以命令(audacious -p &)为例,该代码实现用audacious在后台播放音乐的功能,当然前提是安装了audacious. ...

  6. HDU 2568[前进]模拟

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2568 关键思想:傻傻地模拟 代码如下: #include<iostream> using ...

  7. HQL连接查询

    HQL提供了连接查询机制如内连接,外连接,,还允许显示指定迫切内连接,和迫切外联结. 连接类型 内连接 inner join 或join 迫切内链接 inner join fetch 左外联结  le ...

  8. java_db常见错误总结

    1.java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符 在拼写seq时是否存在存在特殊字符,如:常见语句后面添加了;2.ORA-01722:无效数字解决 ...

  9. Web Worker无阻塞UI的牛逼技术,html5,可惜无法敢于UI

    众所周知,JavaScript是单线程的,JS和UI更新共享同一个进程的部分原因是它们之间互访频繁,但由于共享同一个进程也就会造成js代码在运行的时候用户点击界面元素而没有任何响应这样的情况,这么糟糕 ...

  10. MySQL性能优化方案

    $stmt->execute(); // 绑定结果 $stmt->bind_result($username); // 移动游标 $stmt->fetch(); printf(&qu ...