趁热继续再来学习一波,接下来主要介绍函数,object,数组,面向对象,new实例化。

在介绍“对象”之前,首先得梳妆打扮一番吧,那这梳妆打扮主要有两条路线,一条是淑女范(利用函数对象化),一条是邻家小姐范(利用object),大家各有所好嘛,

那先分别介绍两种路线的具体梳妆方式。

函数

我们都知道JS是一门动态语言,所以可以动态的为函数添加或去除方法和属性,这其实就是对象所需要的东西。所以有说函数就是对象。

正因为如此,所以我们再区分你到底是想要创建一个对象,还是仅仅想实现一个函数的时候,通过定义函数名的开头字母是否是大写来区分是否是对象。

function Hello(name){
this.name = name;
this.helloWho = function(){
console.log("hello "+ this.name);
}
} var helloLilei = new Hello("lilei");
var helloHanmeimei = new Hello("hanmeimei");
helloLilei.helloWho();
helloLilei['helloWho']();
helloHanmeimei.helloWho(); // hello lilei
// hello lilei
// hello hanmeimei

这就是简单地通过函数创建对象的过程。其中helloLilei['helloWho'].()是为了验证可以用数组的方式访问对象里面的方法和属性,不过不是很推荐这种方式来创建,因为每次new一个对象,所有方法和属性都复制了一遍,浪费空间。

这里提一下,总共有五种方式来创建对象,分别是工厂方式,构造函数方式,原型方式,混合的原型和构造函数方式,动态原型方式,都是利用object或者函数的对象化能力,具体可以看JS创建对象的几种方式 JS创建类和对象 这两篇博文讲的很详细了,或者看我接下来的说明。

这里不得不提一下,也是《悟透javascript》里面的观点,函数具有波粒二象性,既有对象的特征也有数组的特征,这里的数组被称为“字典”,一种可以任意伸缩的名值对的集合,Object和function的内部实现就是一个字典结构。

Object

有两种方式来创建一个Object,第二种是简写方式,都是一样的意思,这就创建了一个对象,但是还没有定义对象里面的方法和属性。

var obj = new Object();
var obj = {};

推荐使用对象字面量的表示法,具体如下:

var obj = {
"first-name": "Lau",
"last-name": "Simon",
"nick_name":"tonylp",
"showName": function(){
return this["first-name"] +" "+this.nick_name+" "+this["last-name"];
}
}; //var myName = new obj(); 不可以哦。。
// 为什么,如果我告诉你obj已经是对象了,怎么还能在对象的基础上再创建对象呢。
console.log(obj.showName());

还有一些细节需要注意,上面“first-name”和“last-name”不符合javascript里面定义的标示符,否则就可以直接采用(.属性名)的方式来访问了,例如“nick-name”.

showName也可以通过数组的方式访问的。那如何使用Object来实现对象呢,一般都是在函数内部创建一个Object,然后给这个Object添加各种属性和方法,最后返回这个Object达到创建一个对象的目的。

数组

使用数组主要是用它自带的一整套方法,而且如果你需要,可以自己扩充的,具体怎么扩充,可以用到prototype的知识。之前说过,数组和Object其实是混乱的,参考以下两个例子:

var numbers = ['zero','one','two','three','four'];
var obj = {
"0" : "zero",
"1" : "one",
"2" : "two",
"3" : "three",
"4" : "four"
}; console.log(numbers[2]);
console.log(obj[2]);

获取到的值都是一样的,但是numbers是继承了Array.prototype,而obj继承了Object.prototype。通过如下的代码来区分是否是Array。

var is_array = function(value){
return Object.prototype.toString.apply(value) === '[Object Array]';
};

创建类和对象

这方面很多地方都有介绍,我之前给的网址里面也有,但是为了维持文章的完整性,我还是需要再说一遍的。

工厂方式:

var lev=function(){

    return "啊打";
};
function Parent(){
var Child = new Object();
Child.name="李小龙";
Child.age="30";
Child.lev=lev;
return Child;
}; var x = Parent();
console.log(x.name);
console.log(x.lev());

说明:

1.在函数中定义对象,并定义对象的各种属性,,虽然属性可以为方法,但是建议将属性为方法的属性定义到函数之外,这样可以避免重复创建该方法

2.引用该对象的时候,这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题(前者也成为工厂经典方式,后者称之为混合工厂方式),不推荐使用new的方式使用该对象

3.在函数的最后返回该对象

构造函数方式:

var lev=function(){

    return "啊打";
};
function Parent(){ this.name="李小龙";
this.age="30";
this.lev=lev; }; var x =new Parent();
console.log(x.name);
console.log(x.lev());

说明:

1.与工厂方式相比,使用构造函数方式创建对象,无需再函数内部重建创建对象,而使用this指代,并而函数无需明确return

2.同工厂模式一样,虽然属性的值可以为方法,扔建议将该方法定义在函数之外

还剩下原型方式,混合的原型和构造函数方式,动态原型方式就先不介绍了,等说完prototype再说这个好了。

接下来主要还剩一个原型和闭包,然后是利用原型面向对象以及继承了,也就差不多了,改天再说。

以上全部都属个人思想总结,请大家转载的时候附上原创链接: http://www.cnblogs.com/tonylp

前端学习实践笔记--JavaScript深入【2】的更多相关文章

  1. 前端学习实践笔记--JavaScript深入【1】

    这一年中零零散散看过几本javascript的书,回过头看之前写过的javascript学习笔记,未免有点汗颜,突出“肤浅”二字,然越深入越觉得javascript的博大精深,有种只缘身在此山中的感觉 ...

  2. 前端学习实践笔记--JavaScript深入【3】

    这章主要讨论闭包和原型,以及面向对象和继承. 闭包 闭包充分利用了JS里面作用域的概念,作用域的好处是内部函数可以访问定义它们的外部函数的参数和变量.使用闭包主要是为了读取函数内部的变量或者将函数内部 ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

  5. Day17-18前端学习之路——Javascript事件

    用户在某个元素上点击鼠标或悬停光标. 用户在键盘中按下某个按键. 用户调整浏览器的大小或者关闭浏览器窗口. 一个网页停止加载. 提交表单. 播放.暂停.关闭视频. 发生错误. 更多事件:https:/ ...

  6. 【InfluxDB】InfluxDB学习实践笔记

    InfluxDB是用Go编写的一个开源分布式时序.事件和指标数据库,无需外部依赖.它与Elasticsearch.Graphite等类似.比较适用于与事件紧密相关的数据,例如实时日志数据.实时监控数据 ...

  7. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  8. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  9. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

随机推荐

  1. hdu1024 dp

    题意:求一个序列中的最大 m 段和,m 段不能交叉. dp[i][0/1][j] 表示已经取完第 i 个物品,第 i 个物品取或不取,取到第 j 个子段. 用vis[i][0/1][j] 表示该 dp ...

  2. jquery/js实现一个网页同时调用多个倒计时(最新的)

    <div class="time countdown_1" data-time="1449429731"> <span class=" ...

  3. Lua简介

    Lua是一种扩展语言,脚本语言,还没有主程序的概念,类似于插件,也即不能直接使用,必须嵌入在牛逼的语言里使用,如Python. Lua由C语言编写,可以在宿主语言里写一段c程序,让Lua的解释器使用, ...

  4. 简介 – ASP.NET MVC 4 系列

           正所谓好记性不如烂笔头,尤其是技术类书籍在阅读后,时间久了一定会忘记.而重新翻阅整本书也较为低效,遂以博客记录阅读摘要以供日后查阅.本系列文章均摘要自 Wrox 红皮书[ASP.NET ...

  5. MAC的终端命令

    今天小研究了一下MAC的终端命令,主要为了方便调试程序用,XCODE用不来啊... 在这里记下..防止丢失 pwd 当前工作目录 cd(不加参数) 进root cd(folder) 进入文件夹 cd ...

  6. EnumRemarkAttribute,获取属性值

    首先自定义一个RemarkAttribute [html] view plain copy using System;  using System.Collections.Generic;  usin ...

  7. OpenRefine 数据清洗工具

    OpenRefine(官方网站:http://openrefine.org/).它能自动对数据内容进行修正与整理.OpenRefine可以实现数据排序.自动查找重复条目并完成数据记录.OpenRefi ...

  8. split 转义

    问题:str.split("?");报错了 原因: .?*+!^$[]()\在正则里需要转义 转义需双反斜线.splt("\\+");

  9. web服务器和ftp服务器有什么区别

    WEB是以一个网页的形势展现出来的,FTP是一个上传和下摘的软件统称,一般,在网站制作中有WEB和FTP两种上传文件的方式,WEB是通过文件夹复制的方式将本地文件传到服务器上,速度较慢,FTP是通过不 ...

  10. 升级Dell的R810固件版本

    1.到下面链接去下载win32版本的EXE固件 http://www.dell.com/support/home/cn/zh/cndhs1/Drivers/DriversDetails?driverI ...