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 相关文章推荐
html数组字符串拼接的最快方法
Sep 16 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
微信小程序中实现手指缩放图片的示例代码
Mar 13 Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
微信小程序实现多图上传
Jun 19 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
域名查询代码公布
2006/10/09 PHP
在PHP中使用与Perl兼容的正则表达式
2006/11/26 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
javascript实现留言板功能
2020/02/08 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
Python兔子毒药问题实例分析
2015/03/05 Python
python中随机函数random用法实例
2015/04/30 Python
对python3 一组数值的归一化处理方法详解
2018/07/11 Python
python内置数据类型之列表操作
2018/11/12 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
Ejb技术面试题
2015/04/29 面试题
亲戚结婚的请假条
2014/02/11 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
2014最新离职证明范本
2014/09/12 职场文书
个人贷款授权委托书样本
2014/10/07 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
简单谈谈Python面向对象的相关知识
2021/06/28 Python