趁热继续再来学习一波,接下来主要介绍函数,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. Codeforces Round #379 (Div. 2) E. Anton and Tree

    题意: 给一颗树 每个节点有黑白2色 可以使一个色块同事变色,问最少的变色次数. 思路: 先缩点 把一样颜色的相邻点 缩成一个 然后新的树 刚好每一层是一个颜色. 最后的答案就是树的直径/2 不过我用 ...

  2. CSS定位类型

    在CSS里面布局是相当重要的,二在这一周了,学习了一些定位,很少用到,用了更好的方式浮动.BFC.IFC等去解决问题. 而也我也对定位的概念不那么熟练运用. 初步的定位类型 1.静态定位(static ...

  3. 堆排序(c++第一次尝试)

    对排序的实现思路有两种 第一种:1.构建最小堆.2.将最小堆的堆顶元素取出放到辅助数组的0号下标.3.重新调整成最小堆(向上调整) 4.重复2-3 第二种:1.构建最大堆.2.将堆顶元素(0号)与最后 ...

  4. DotNet 资源大全【转】

    转自:http://blog.jobbole.com/96676/ API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框架,基于.Net 及 Mono ...

  5. Python error: Unable to find vcvarsall.bat

    在安装一些Python模块时,大部分是cpython写的模块时会发生如下错误 error: Unable to find vcvarsall.bat.先前的一篇文章:在Windows上安装Scrapy ...

  6. [2014.01.27]wfGifAnimator 动画GIF组件 3.0

    组件支持设置GIF帧延时和获取GIF的帧延迟. 组件支持添加或插入或更新帧(支持bmp/jpg/gif/wmf/emf/ico格式).删除帧.清空帧操作. 组件支持GIF动画缩放大小. 组件支持绘制线 ...

  7. OLDB读取excel的数据类型不匹配的解决方案(ZT)

    1 引言  在应用程序的设计中,经常需要读取Excel数据或将Excel数据导入转换到其他数据载体中,例如将Excel数据通过应用程序导入SQL Sever等数据库中以备使用.笔者在开发“汽车产业链A ...

  8. jq插件的传值

    因插件方式写的少,先慢慢记录. 默认的参数值 jQuery.fn.shadow =function(options){ var defaults = { slices : 5, opacity : 0 ...

  9. 01 Linux入门介绍

    一.Linux 初步介绍 Linux的优点 免费的,开源的 支持多线程,多用户 安全性好 对内存和文件管理优越 系统稳定 消耗资源少 Linux的缺点 操作相对困难 一些专业软件以及游戏支持度不足 L ...

  10. 判断Activity是否正在退出 isFinishing()

    boolean android.app.Activity.isFinishing()           Added in API level 1 Check to see whether this ...