前端学习实践笔记--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 绑定全局对象,浏览器环境全 ...
随机推荐
- MyEclipse优化-六步攻略
1.首先是jsp的可视化页面 windows -> preferences->General-> Editors -> File Associations 在上方框内选择*. ...
- 前端学习 第三弹: JavaScript语言的特性与发展
前端学习 第三弹: JavaScript语言的特性与发展 javascript的缺点 1.没有命名空间,没有多文件的规范,同名函数相互覆盖 导致js的模块化很差 2.标准库很小 3.null和unde ...
- [THINKING IN JAVA]操作符
3 操作符 3.1 static import 可以static import静态方法和变量,这样就可以在不写类名的前提下调用类中的静态方法和变量: package com.chenlei.study ...
- Matlab 进阶学习记录
最近在看 Faster RCNN的Matlab code,发现很多matlab技巧,在此记录: 1. conf_proposal = proposal_config('image_means', ...
- ABBYY PDF Transformer+怎么标志注释
ABBYY PDF Transformer+是一款可创建.编辑.添加注释及将PDF文件转换为其他可编辑格式的通用工具,可用来在PDF页面的任何位置添加注释(关于如何通过ABBYY PDF Transf ...
- 实战之中兴ZXHN F460光猫破解超级密码+开启无线路由功能
本文面向小白用户,即使你不懂电脑看完你也会破解光猫,网上有些文章的操作方法是错误的.按照我这篇文章,只要型号对,那么肯定没问题!电信光纤入户,家里用的是电信送的中兴查看 ZXHN F460 中的全部文 ...
- CANVAS 水波动态背景
参考:https://github.com/cyclegtx/wave_background 做的水波背景,以后可能会用到哈! 效果如下: 代码如下: <!DOCTYPE html> &l ...
- Ant OOM的问题
ant 编译的问题 Android编译的有时候会报OOM的错误. 可能是Java的堆大小设置的问题 可在 ant.bat 脚本的 @echo off 语句后面添加: set ANT_OPTS=-Xm ...
- 【MySQL】SQL优化系列之 in与range 查询
首先我们来说下in()这种方式的查询 在<高性能MySQL>里面提及用in这种方式可以有效的替代一定的range查询,提升查询效率,因为在一条索引里面,range字段后面的部分是不生效的. ...
- golang
Golang, 以17个简短代码片段,切底弄懂 channel 基础 (原创出处为本博客:http://www.cnblogs.com/linguanh/) http://www.cnblogs.co ...