脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → javaScript中的this示例

javaScript中的this示例学习详解及工作原理

 更新时间：2014年01月13日 09:39:54   作者：  
这篇文章主要介绍了javaScript中的this示例学习详解及工作原理，大家参考使用吧

this的工作原理

如果一个函数被作为一个对象的方法调用，那么this将被指派为这个对象。

复制代码 代码如下:

var parent = {
    method: function () {
        console.log(this);
    }
};

parent.method();
// <- parent


注意这种行为非常“脆弱”，如果你获取一个方法的引用并且调用，那么this的值不会是parent了，而是window全局对象。这让大多数开发者迷惑。

复制代码 代码如下:

ThisClownCar();
// <- Window
 

改动this

.call、 .apply 和.bind 方法用来操作调用函数的方式，帮我们定义this的值和传递给函数的参数值。

Function.prototype.call 可以有任意数量的参数，第一个参数被分配给this，剩下的被传递给调用函数。

复制代码 代码如下:

Array.prototype.slice.call([1, 2, 3], 1, 2)
// <- [2]

Function.prototype.apply 的行为和.call类似，但它传递给函数的参数是一个数组，而不是任意参数。

String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']
 

Function.prototype.bind 创建一个特殊的函数，该函数将永远使用传递给.bind的参数作为this的值，以及能够分配部分参数，创建原函数的珂里化（curride）版本。

 

复制代码 代码如下:

var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);

// effectively the same as arr.push(3)
add();

// effectively the same as arr.push(3, 4)
add(4);

console.log(arr);
// <- [1, 2, 3, 3, 4]


作用域链中的this

在下面的例子，this将无法在作用域链中保持不变。这是规则的缺陷，并且常常会给业余开发者带来困惑。

复制代码 代码如下:

function scoping () {
  console.log(this);

  return function () {
    console.log(this);
  };
}

scoping()();
// <- Window
// <- Window

有一个常见的方法，创建一个局部变量保持对this的引用，并且在子作用域中不能有同命变量。子作用域中的同名变量将覆盖父作用域中对this的引用。http://www.cnblogs.com/sosoft/

复制代码 代码如下:

function retaining () {
  var self = this;

  return function () {
    console.log(self);
  };
}

retaining()();
// <- Window
 

除非你真的想同时使用父作用域的this,以及当前this值，由于某些莫名其妙的原因,我更喜欢是使用的方法.bind函数。这可以用来将父作用域的this指定给子作用域。

 

复制代码 代码如下:

function bound () {
  return function () {
    console.log(this);
  }.bind(this);
}

bound()();
// <- Window

您可能感兴趣的文章:

相关文章

  • js中对象的声明方式以及数组的一些用法示例

    js中对象的声明方式以及数组的一些用法示例

    本文为大家介绍下js中的对象声明方式以及数组的一些用法，下面有个不错的示例，感兴趣的朋友可以参考下，希望对大家有所帮助
    2013-12-12
  • JavaScript 学习笔记之变量及其作用域

    JavaScript 学习笔记之变量及其作用域

    前篇文章我们介绍了学习javascript所需要的基础中的基础知识，今天我们来更进一步，学习下javascript变量及其作用域，希望小伙伴们通过本文能够有所得。
    2015-01-01
  • window.onload和$(function(){})的区别介绍

    window.onload和$(function(){})的区别介绍

    window.onload和$(function(){})有什么区别。window.onload表示页面加载完了后（包括dom和js），再执行函数里面的内容，感兴趣的朋友可以了解下
    2013-10-10
  • 浅谈JavaScript事件的属性列表

    浅谈JavaScript事件的属性列表

    本文向大家简单介绍了javascript事件的属性列表，非常的详细，推荐给有相同需求的小伙伴们。
    2015-03-03
  • JavaScript中的数据类型介绍

    JavaScript中的数据类型介绍

    这篇文章介绍了JavaScript中的数据类型，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • 深入了解JS之作用域和闭包

    深入了解JS之作用域和闭包

    这篇文章主要介绍了JS之作用域和闭包的相关知识，文中讲解非常详细，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-06-06
  • javascript 中__proto__和prototype详解

    javascript 中__proto__和prototype详解

    本文详细介绍了javascript的内部原型__proto__和构造器原型prototype，以及他们之间的异同，十分的详尽，有需要的小伙伴快来研究下吧。
    2014-11-11
  • 网页中CDATA标记的说明

    网页中CDATA标记的说明

    经常在网页html代码中看见这样的嵌入标签，但实际使用没有用过，特此在记录下。
    2010-09-09
  • javascript对浅拷贝和深拷贝的详解

    javascript对浅拷贝和深拷贝的详解

    这篇文章主要为大家详细介绍了JavaScript对象的浅拷贝和深拷贝代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下.
    2016-10-10
  • Javascript模块化编程(一)AMD规范(规范使用模块)

    Javascript模块化编程(一)AMD规范(规范使用模块)

    这个系列的第一部分介绍了Javascript模块的基本写法，今天介绍如何规范地使用模块,先想一想，为什么模块很重要？接下来为您详细介绍，感兴趣的朋友可以了解下啊
    2013-01-01

最新评论