javascript中的self和this用法小结


Posted in Javascript onFebruary 08, 2014

一、 起因
那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^。
prototype.js代码片段

代码如下:
var Class = {
    create: function() {
        return function() {
            this.initialize.apply(this , arguments);
        }
    }
}
// Class使用方法如下
var A = Class.create();
A. prototype={
    initialize:function(v){
        this .value=v;
    }
    showValue:function(){
        alert(this.value);
    }
}
var a = new A(‘helloWord!');
a. showValue();//弹出对话框helloWord!

l initialize是什么?
l apply方法是干什么的?
l arguments变量呢?
l 为什么new A后就会执行initialize方法?
寻找答案:

二、 Js的面向对象
initialize是什么?
只不过是个变量,代表一个方法,用途是类的构造函数。
其具体功能靠js的面向对象支持,那么js的面向对象是什么样子的那?和java 的有什么相同与不同?
看代码:

代码如下:

var ClassName = function(v){ 
    this.value=v; 
    this.getValue=function(){ 
        return this.value; 
    } 
    this.setValue=function(v){ 
        this.value=v; 
    } 
}

那么JS中的函数和类有什么不同呢?
其实是一样的,ClassName就是一个函数,当出现在new后面的时候就作为一个构造函数来构造对象。

代码如下:
var objectName1 = new ClassName(“a”);//得到一个对象

其中objectName1就是执行ClassName构造函数后得到的对象,而在ClassName函数中的this指的就是new之后构造出来的对象,所以objectName1会后一个属性和两个方法。可以通过这样来调用他们:

代码如下:
objectName1.setValue(''hello'');
alert(objectName1.getValue());//对话框hello
alert(objectName1.value) ;//对话框hello

那么

代码如下:
var objectName2 = ClassName(“b”);//得到一个对象

这样objectName2得到的是什么呢?显然是方法的返回值,这里ClassName只作为了一个普通的函数(虽然首字母大写了)。但是在之前写的ClassName中并没有返回值,所以objectName2会是undifinded那么“b”赋给谁了呢?在这并没有产生一个对象,而只是单纯的执行这个方法,所以这个“b”赋值给了调用这个方法的对象window,证据如下:
var objectName2 = ClassName(“b”);//得到一个对象
alert(window.value);//对话框b
所以JS中的所有function都是一样的,但是用途可能是不同的(用作构造对象抑或是执行一个过程)。
下面该回到主题了initialize是干什么的?

代码如下:

var Class = { 
    create: function() { 
        return function() { 
            this.initialize.apply(this , arguments); 
        } 
    } 
} 
var A = Class.create();

这段代码是构造个一个function复制给A,这个function是

代码如下:

function() { 
    this.initialize.apply(this , arguments); 
}

并且后面这个方法是用来做构造函数的。当使用这个构造函数来构造对象的时候,会让构造出来的这个对象的initialize变量执行apply()方法,apply()的用途后面在说,继续说initialize。这样在初始化对象的时候会联系到initialize(怎么联系就要看apply的了)。
那么

代码如下:

A.prototype={ 
    initialize:function(v){ 
        this .value=v; 
    } 
    showValue:function(){ 
        alert(this.value); 
    } 
}

是什么意思呢?
Prototype是“原型”的意思。A是一个function(),那么A. prototype,就是function中的一个变量,其实是个对象。这个对象拥有什么方法,那么function产生的对象就拥有什么方法,故
var a = new A(‘helloWord!');
a. showValue();//弹出对话框helloWord!
所以a对象也会有initialize方法,不只如此,每一个有A构造出来的对象都会有一个initialize方法,而在前面说过,构造的时候会调用构造函数,构造函数里面会让initialize去调用apply方法,于是在new A(‘helloWord!')的时候initialize回去调用apply方法。这也就是调用了一个初始化的方法。

三、 call()和apply()
下面开始研究apply(),在网上找了几个资料,并结合自己的研究,了解了call()和apply()的功能。功能基本一样,function().call(object,{},{}……)或者function().apply (object,[……])的功能就是对象object调用这里的funciton(),不同之处是call参数从第二个开始都是传递给funciton的,可以依次罗列用“,”隔开。而apply只有两个参数,第二个是一个数组,其中存储了所有传递给function的参数。
this.initialize.apply(this , arguments);
是什么意思?
这里的第一个this,是指用new调用构造函数之后生成的对象,也就是前面的a,那么第二个this也当然应该是指同一个对象。那这句话就是this(也就是a)调用initialize方法,参数是arguments对象(参数的数组对象),所以在构造函数执行的时候,对象a就会去执行initialize方法来初始化,这样就和单词“initialize”的意思对上了。
那么执行initialize方法的参数怎么传递进去的呢?

四、 Arguments对象
这段代码能说明一切了:

代码如下:

function test(){ 
    alert(typeof arguments); 
    for(var i=0; i<arguments.length; i++){ 
        alert(arguments[i]); 
    } 
} 
test("1","2","3"); 
test("a","b");

执行后alert(typeof arguments);会显示object,说明arguments是对象。然后会依次打出1、2、3。说明arguments就是调用函数的实参数组。

代码如下:

var Class = { 
    create: function() { 
        return function() { 
            this.initialize.apply(this , arguments); 
        } 
    } 
}

arguments 就是create返回的构造函数的实参数组,那么在
var a = new A(‘helloWord!');
的时候‘helloWord!'就是实参数组(虽然只有一个字符串),传递给方法apply,然后在调用initialize 的时候作为参数传递给初始化函数initialize。
Javascript 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
vue中keep-alive,include的缓存问题
Nov 26 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 Javascript
javascript中match函数的用法小结
Feb 08 #Javascript
纯JS实现动态时间显示代码
Feb 08 #Javascript
js数字转换为float,取N位小数
Feb 08 #Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
Feb 08 #Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 #Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 #Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 #Javascript
You might like
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
react的hooks的用法详解
2020/10/12 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python中 map()函数的用法详解
2018/07/10 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
python tkinter组件使用详解
2019/09/16 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
高级人员简历的自我评价分享
2013/11/03 职场文书
办理信用卡工作证明
2014/01/11 职场文书
迟到检讨书500字
2014/02/05 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
《锄禾》教学反思
2014/04/08 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
房产公证书样本
2015/01/23 职场文书
社区活动总结
2015/02/04 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS