JavaScript中this指针与函数对象核心机制详解
作者:异步漫步时间:2026-10-24 02:17:55浏览:133
本文深入解析JavaScript中this指针的动态绑定机制,通过对象属性与方法赋值的示例说明其指向变化。详细讲解函数对象的prototype扩展、arguments对象的callee属性在递归中的应用,以及apply和call方法如何改变函数运行时的this上下文,并对比两者参数传递形式的差异。
this指针的动态绑定机制
一、this对象解析
代码示例如下:
view plaincopy to clipboardprint?
var obj1=new Object();
var obj2=new Object();
//为两对象添加属性p,值分别为1和2
obj1.p=1;
obj2.p=2;
//为obj1定义方法以显示p值
obj1.getP=function(){
alert(this.p); //看似this指向obj1
}
//执行obj1的getP,输出结果为1
obj1.getP();
//将obj2的getP赋值为obj1的getP
obj2.getP=obj1.getP;
//执行obj2的getP,输出结果为2
obj2.getP();
var obj1=new Object();
var obj2=new Object();
//为两对象添加属性p,值分别为1和2
obj1.p=1;
obj2.p=2;
//为obj1定义方法以显示p值
obj1.getP=function(){
alert(this.p); //看似this指向obj1
}
//执行obj1的getP,输出结果为1
obj1.getP();
//将obj2的getP赋值为obj1的getP
obj2.getP=obj1.getP;
//执行obj2的getP,输出结果为2
obj2.getP();二、关于函数对象
函数对象原型与arguments属性
代码示例如下:
//为函数对象添加method1方法
Function.prototype.method1=function(){
alert("function1");
}
function func1(a,b,c){
return a+b+c;
}
func1.method1(); //提示:function1
func1.method1.method1(); //提示:function1
//添加getType方法,适用于普通及函数对象
Object.prototype.getType=function(){
return typeof(this);
}
var array1=new Array();
function func1(a,b){
return a+b;
}
alert(array1.getType()); //提示:object
alert(func1.getType()); //提示:function
//func2作为参数传入func1,由func1内部调用
function func1(theFunc){
theFunc();
}
function func2(){
alert("ok");
}
func1(func2); //提示:ok
//函数调用时,除指定参数外,还生成隐含对象arguments
function func(a,b){
alert(a);
alert(b);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
func(1,2,3); //提示:1,2,3
/*
arguments对象的另一属性callee,
指向函数对象自身引用.
这有助于实现无名函数递归或保证封装性.
*/
var sum=function(n){
if(1==n)
return 1;
else
return n+arguments.callee(n-1);
}
alert(sum(100)); //提示:5050
/*
apply与call方法的上下文绑定JavaScript为函数对象定义apply和call两个方法.
二者均用于将函数绑定至另一对象运行,区别仅在于参数定义方式:
引用片段如下:
Function.prototype.apply(thisArg,argArray);
Function.prototype.call(thisArg[,arg1[,arg2…]]);
由函数原型可见,首参数均命名为thisArg,
即所有函数内部this指针被赋值为thisArg,
从而实现将函数作为另一对象方法运行的目的。
除thisArg参数外,二者均向Function对象传递其余参数。
*/
//定义函数func1,拥有属性p及方法A
function func1(){
this.p="func1-";
this.A=function(arg){
alert(this.p+arg);
}
}
//定义函数func2,拥有属性p及方法B
function func2(){
this.p="func2-";
this.B=function(arg){
alert(this.p+arg);
}
}
var obj1=new func1();
var obj2=new func2();
obj1.A("byA"); //显示func1-byA
obj2.B("byB"); //显示func2-byB
obj1.A.apply(obj2,["byA"]); //显示func2-byA,其中[“byA”]为单元素数组,下同
obj2.B.apply(obj1,["byB"]); //显示func1-byB
obj1.A.call(obj2,"byA"); //显示func2-byA
obj2.B.call(obj1,"byB"); //显示func1-byB
/*
可见,obj1的方法A绑定至obj2运行后,
整个函数A的运行环境转移至obj2,即this指针指向obj2。
同理,obj2的函数B亦可绑定至obj1对象运行。
代码末尾4行展示了apply与call在参数形式上的差异。
*/
/*
函数对象的length属性与arguments的length属性不同,
函数对象另具length属性,
表示函数定义时指定参数的数量,
而非调用时实际传递的参数个数
*/
function sum(a,b){
return a+b;
}
alert(sum.length);作者最新文章
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法:concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19
