改变javascript函数内部this指针指向的三种方法

在查了大量的资料后，我总结了下面的三条规则，这三条规则，已经可以解决目前我所遇到的所有问题.
规则0：函数本身是一个特殊类型，大多数时候，可以认为是一个变量。


代码如下:

function a()
{
alert(this);
}

或者
var a = function()
{
alert(this);
}

都可以认为是创建了一个变量，这个变量的值就是一个函数。

规则1：如果一个函数，是某个对象的key 值，那么，this就指向这个对象。
这个规则很好理解：

代码如下:

var a = function(obj)
{
alert(this == obj);
}

var o = {};
o.afun = a;
o.afun(o); //true

函数就是一个变量，但是可以绑定到某个对象的下面，并且 this 就会指向 o 对象。
这里必须要注意，没有被绑定的对象，默认this 指向window 对象。
举几个例子：


代码如下:

function a()
{
//this == window
}

function a()
{
//this == window
function b()
{
//this == window
}
}

还必须注意的是，绑定没有传递性，比如上面的嵌套的函数，a绑定到 o 对象，那么就影响了a函数，
而b 还是指向到window。

规则2：如果函数new 了一下，那么就会创建一个对象，并且this 指向 新创建的对象。

var o = new a();
这个时候，o 不再是个函数，而实际上，可以认为是这样的一个过程。
创建一个对象 var o = {};
然后，把this 指向 o，通过this 把 o 给初始化了。

规则3：通过apply 可以改变this 的指向

这个apply 的绑定就更加的灵活了，实际上，apply的功能和下面的功能差不多。


代码如下:

var a = function (obj)
{
alert(this == obj);
};
obj.fun = a;
obj.fun(obj);//true

简单的，可以a.apply(obj, [obj]); // true

javascript 的this 可以简单的认为是 后期绑定，没有地方绑定的时候，默认绑定window。

综合实例：
jquery 里面有一个很常用的函数 each，可以把循环的对象元素绑定到this，方便操作。
这里只是简单的做个演示：

代码


代码如下:

function each(tagName, callback)
{
var lists = document.getElementsByTagName(tagName);
for (var i = 0; i < lists.length; i++)
{
callback.apply(lists[i]);
}
}
each("a",
function ()
{
this.style.color = "red";
}
);

可以看到我头部导航的链接都变成红色了。

赞 (0)

相关推荐

  • 详解JS中定时器setInterval和setTImeout的this指向问题

    前言 Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行.两者的使用方法类似. 最近在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,详细的介绍通过一个示例展开,一起来看看吧. 如下例: var num = 0; function Obj (){ this.num = 1, this.getNum =

  • 关于JavaScript中的this指向问题总结篇

    在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中,this指向创建者,并非调用者 4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) const func = function () { console.log(this)

  • 聊一聊JS中this的指向问题

    JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说. this的指向: 1.this 指的是调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁. 来看两个栗子: oBtn.onclick = function(){ alert(this); //oBtn } oBtn[i].onclick = fn

  • JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

  • js绑定事件this指向发生改变的问题解决方法

    可对函数进行如下扩展 复制代码 代码如下: Function.prototype.bind = function(obj) { var _this = this; return function() { _this.apply(obj,arguments); } } 用法如下 复制代码 代码如下: var a = function(){ alert(this.title) }.bind(document); a(); 常用在这儿 复制代码 代码如下: function myalert() { t

  • 改变javascript函数内部this指针指向的三种方法

    在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.规则0:函数本身是一个特殊类型,大多数时候,可以认为是一个变量. 复制代码 代码如下: function a() { alert(this); } 或者 var a = function() { alert(this); } 都可以认为是创建了一个变量,这个变量的值就是一个函数. 规则1:如果一个函数,是某个对象的key 值,那么,this就指向这个对象. 这个规则很好理解: 复制代码 代码如下: var

  • Javascript定义类（class）的三种方法详解

    Javascript定义类（class）的三种方法详解

    将近20年前,Javascript诞生的时候,只是一种简单的网页脚本语言.如果你忘了填写用户名,它就跳出一个警告. 如今,它变得几乎无所不能,从前端到后端,有着各种匪夷所思的用途.程序员用它完成越来越庞大的项目. Javascript代码的复杂度也直线上升.单个网页包含10000行Javascript代码,早就司空见惯.2010年,一个工程师透露,Gmail的代码长度是443000行! 编写和维护如此复杂的代码,必须使用模块化策略.目前,业界的主流做法是采用"面向对象编程".因此,Ja

  • 利用函数返回oracle对象表的三种方法

    利用函数返回oracle对象表的三种方法

    因为要返回表对象,无论后续用什么方法返回,都先要声明全局type:并且,字段变量类型要为object,不能为record: create or replace type t_test as object( EMPNO NUMBER(4), ENAME VARCHAR2(10), JOB VARCHAR2(9), SAL NUMBER(7,2) ); create or replace type t_test_table as table of t_test; 至于返回表对象的方法,目前发现三种:

  • JavaScript中获取HTML元素值的三种方法

    JavaScript中取得元素的方法有三种:分别是: 1.getElementById() 方法:通过id取得HTML元素. 2.getElementsByName()方法:通过name取得元素,是一个数组. 3.getElementsByTagName()方法:通过HTML标签取得元素,是一个数组. 如果要取得值可以使用value,如:var x=document.getElementById("id").value; 方法一:getElementById() 方法 可返回对拥有指定

  • 浅谈javascript 函数内部属性

    在函数内部有两个特殊的属性:arguments 和 this.arguments是一个类数组对象,包含传入的所有参数,         但是这个对象还有一个名叫callee的属性,该属性是一个指针,指向拥有这个arguments对象的函数. 请看经典的阶乘函数例子: 复制代码 代码如下: function Factorial(num) {             if (num <= 1) {                 return 1;             } else {     

  • JavaScript函数内部属性和函数方法实例详解

    JavaScript函数内部属性和函数方法实例详解

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块. 函数是对象,有自己的属性和方法 .首先通过console下输出的函数属性方法来直观的看一下: 函数内部属性只要包括两个特殊的对象:arguments和this. 函数属性包括:length和prototype 函数方法(非继承)包括:apply()和call() 继承而来的函数方法:bind().toString().toLocaleString().valueOf() 其他的目前不熟,后面再补充 1. 函数内部属性 在函数内部,有两

  • JavaScript 申明函数的三种方法 每个函数就是一个对象（一）

    一.申明函数的三种方法 (Declaring a Function) 方法一:function functionName([parameters]){functionBody}; Example D1 复制代码 代码如下: function add(a, b) { return a+b; } alert(add(1,2)); // produces 3 当我们这样申明函数时,函数的内容被解释(但没有执行,要我们调用该函数才会执行),同时,一个名为add的对象已经建立. 方法二:将一个未命名的函数

  • JavaScript中定义函数的三种方法

    在JavaScript的世界里,定义函数的方法多种多样,这正是JavaScript灵活性的体现,但是正是这个原因让初学者摸不着头脑,尤其对于没有 语言基础的同学.正所谓条条大道通罗马,但是如果道路太多,会让行路者不知所措,因为不知道走那条路才是正途,呵呵,废话一大篇,闲言少叙,先看代码: 复制代码 代码如下: /*第一种方法,使用function语句,格式如下*/ function fn(){ alert("这是使用function语句进行函数定义"); } fn(); /*第二种方法

  • JavaScript继承的三种方法实例

    JavaScript继承的三种方法实例

    继承 1. 什么是继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承. 继承也是为了数据共享,js中的继承也是为了实现数据共享 我们可以联想到原型,他的两个作用是: 原型作用之一:数据共享,节省内存空间 原型作用之二:为了实现继承 继承是一种关系:父类级别与类级别的关系 例子: 人类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学生类别: 姓名, 性别, 年龄 ,吃饭, 睡觉 学习行为 老师类别: 姓名, 性别, 年龄

  • javascript实现数组最大值和最小值的6种方法

    给定一个数组[1,8,5,4,3,9,2],编写一个算法,得到数组的最大值 9,和最小值 1. 1.通过prototype属性扩展min()函数和max()函数 算法1的思路是在自定义min()和max()函数中,通过循环由第一个值依次与后面的值作比较,动态更新最大值和最小值,从而找到结果. // 最小值 Array.prototype.min = function () { let min = this[0]; let len = this.length; for (let i = 1; i

随机推荐