前端学习实践笔记--JavaScript深入【2】
趁热继续再来学习一波,接下来主要介绍函数,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】的更多相关文章
- 前端学习实践笔记--JavaScript深入【1】
这一年中零零散散看过几本javascript的书,回过头看之前写过的javascript学习笔记,未免有点汗颜,突出“肤浅”二字,然越深入越觉得javascript的博大精深,有种只缘身在此山中的感觉 ...
- 前端学习实践笔记--JavaScript深入【3】
这章主要讨论闭包和原型,以及面向对象和继承. 闭包 闭包充分利用了JS里面作用域的概念,作用域的好处是内部函数可以访问定义它们的外部函数的参数和变量.使用闭包主要是为了读取函数内部的变量或者将函数内部 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 前端学习 第二弹: JavaScript中的一些函数与对象(1)
前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
- Day17-18前端学习之路——Javascript事件
用户在某个元素上点击鼠标或悬停光标. 用户在键盘中按下某个按键. 用户调整浏览器的大小或者关闭浏览器窗口. 一个网页停止加载. 提交表单. 播放.暂停.关闭视频. 发生错误. 更多事件:https:/ ...
- 【InfluxDB】InfluxDB学习实践笔记
InfluxDB是用Go编写的一个开源分布式时序.事件和指标数据库,无需外部依赖.它与Elasticsearch.Graphite等类似.比较适用于与事件紧密相关的数据,例如实时日志数据.实时监控数据 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
随机推荐
- 【Django】Django web项目部署(Nginx+uwsgi)
一.安装uwsgi 通过pip安装uwsgi. pip install uwsgi 测试uwsgi,创建test.py文件: def application(env, start_response): ...
- zip伪加密文件分析(进阶版)
作者近日偶然获得一misc题,本来以为手到擒来,毕竟这是个大家都讨论烂了的题,详情访问链接http://blog.csdn.net/ETF6996/article/details/51946250.既 ...
- VB CreateObject转C#
C#调用方法.函数获取属性大致流程如下: System.Type oType = System.Type.GetTypeFromProgID("SomeClass"); objec ...
- 触发器事件trigger
修改mysql结束符 delimiter name 触发器语法: create trigger 触发器名称 after/before 触发时间 //错误 ERROR ...
- Hue
Hue是一个开源的Apache Hadoop UI系统,由Cloudera Desktop演化而来,最后Cloudera公司将其贡献给Apache基金会的Hadoop社区,它是基于Python Web ...
- Eclipse for j2ee 无法调式问题
首先要配置tomcat,window--preference--server--Installed Runtimes, add--选择tomcat--next--选择tomcat的安装目录(根目录)- ...
- Jeesite的cahche工具类
本CacheUtils主要是基于shiro的cache进行处理. 其他选择: 类似的我们可以选择java cache ,spring cahche等方案. 再进一步 ...
- [2014.01.27]wfGifAnimator 动画GIF组件 3.0
组件支持设置GIF帧延时和获取GIF的帧延迟. 组件支持添加或插入或更新帧(支持bmp/jpg/gif/wmf/emf/ico格式).删除帧.清空帧操作. 组件支持GIF动画缩放大小. 组件支持绘制线 ...
- sap 取货币之间汇率
FORM FRM_GET_KURSK USING PV_KURST "M PV_FCURR PV_TCURR PV_PRSDT CHANGING PV_KURSK. DATA: LV_RAT ...
- bzoj3316: JC loves Mkk
Description Input 第1行,包含三个整数.n,L,R.第2行n个数,代表a[1..n]. Output 仅1行,表示询问答案.如果答案是整数,就输出整数:否则,输出既约分数“P/Q”来 ...