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

javaScript中的this示例学习详解及工作原理_基础知识

php中文网

发布： 2016-05-16 17:04:11

原创

1324人浏览过

this的工作原理

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

复制代码代码如下:

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

parent.method();
// 

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

复制代码代码如下:

ThisClownCar();
//  

改动this

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

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

复制代码代码如下:

Array.prototype.slice.call([1, 2, 3], 1, 2)
// 
Function.prototype.apply 的行为和.call类似，但它传递给函数的参数是一个数组，而不是任意参数。

String.prototype.split.apply('13.12.02', ['.'])
//  

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

HoloPix AI

查看详情

复制代码代码如下:

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);
// 

作用域链中的this

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

复制代码代码如下:

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

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

scoping()();
// // 

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

复制代码代码如下:

 
function retaining () {
  var self = this;

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

retaining()();
//  

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

复制代码代码如下:

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

bound()();
// 

大家都在看：

javascript_如何实现双向数据绑定 javascript如何转换类数组_有哪些常见场景 javascript怎样操作浏览器通知？_javascript的Notification API如何请求权限？ JavaScript async/await是什么_如何简化异步代码？ javascript默认参数是什么_如何为函数参数设置默认值？