趁热继续再来学习一波,接下来主要介绍函数,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. Eclipse中的Link with Editor功能是如何实现

    Eclipse中的Link with Editor功能是如何实现 - kaukiyou的专栏 - 博客频道 - CSDN.NEThttp://blog.csdn.net/kaukiyou/articl ...

  2. AJAX原理及应用

    Ajax技术的核心是XMLHttpRequest对象(简称XHR),可以通过使用XMLHttpRequest对象获取到服务器的数据,然后再通过DOM将数据插入到页面中呈现.也就是javascript可 ...

  3. windows server 2012 FTP SMB 文件夹权限继承

    被坑了..win默认的权限继承,有继承就没有smb目录继承,有smb目录继承 父级文件夹的权限就删不掉.. 换ftp轻松愉快...

  4. [UI]抽屉菜单DrawerLayout分析(一)

    本文转载于:http://www.cnblogs.com/avenwu/archive/2014/04/16/3669367.html 侧拉菜单作为常见的导航交互控件,最开始在没有没有android官 ...

  5. java1234教程系列笔记 S1 Java SE chapter 02 lesson 03 java基本数据类型

    第二章 第三节 数据类型 3.1 分类 基本数据类型.引用类型 3.2整型 byte 8 short 16 int  32 long 64 作业: A:1-10求和 B:float double 的最 ...

  6. C# FileSystemWatcher监听文件事件

    现有一个需求如下:监控某个目录中的文件修改,创建,删除等信息,并记录下来. 这里用到FileSystemWatcher类.由于考虑到文件的写入量会很频率,所以考虑先将监听到的消息记录到内存中. 监听部 ...

  7. php.ini修改php上传文件大小限制的方法详解

    打开php.ini,首先找到file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开upload_tmp_dir ;文件上传至服务器上存储临时文件的地方,如果没指定就 ...

  8. NSString和NSMutableString常用方法+NSArray常用代码 (转)

    常见的NSString和NSMutableString方法: NSString方法: [plain] view plaincopy   +(id) stringWithContentsOfFile:p ...

  9. firefox 下event事件失效的解决方法

    var evt = arguments.callee.caller.arguments[0] || window.event; evt.preventDefault(); evt.stopPropag ...

  10. HTML中strong与b,em与i标签的区别

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...