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

 这篇文章主要介绍了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
 

时间: 2024-10-20 05:33:08

javaScript中的this示例学习详解及工作原理的相关文章

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

this的工作原理 如果一个函数被作为一个对象的方法调用,那么this将被指派为这个对象. 复制代码 代码如下: var parent = {    method: function () {        console.log(this);    }}; parent.method();// <- parent 注意这种行为非常"脆弱",如果你获取一个方法的引用并且调用,那么this的值不会是parent了,而是window全局对象.这让大多数开发者迷惑. 复制代码 代码如下

JavaScript中的replace()方法使用详解

  这篇文章主要介绍了JavaScript中的replace()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 该方法找到一个正则表达式的字符串之间的匹配,并取代了匹配的子带的新的子串. 替换字符串可以包含以下特殊替换模式: 语法 ? 1 string.replace(regexp/substr, newSubStr/function[, flags]); 下面是参数的详细信息: regexp : 一个RegExp对象.匹配被替换参数的返回#2. substr : 一个字符串,由

JavaScript中的splice()方法使用详解

  这篇文章主要介绍了JavaScript中的splice()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 JavaScript数组的splice()方法改变数组的内容,增加了新的元素,同时消除旧元素. 语法 ? 1 array.splice(index, howMany, [element1][, ..., elementN]); 下面是参数的详细信息: index : 在该索引开始改变的数组. howMany : 整数,表示旧数组元素数去除.如果的howmany为0,没有元

JavaScript中的getDay()方法使用详解

  这篇文章主要介绍了JavaScript中的getDay()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 javascript Date.getDay()方法按照本地时间返回一周中的一天为所述指定的日期.通过getDay返回的值是对应于星期几的整数:0代表星期日,1代表星期一,2表示星期二,依此类推. 语法 ? 1 Date.getDay() 下面是参数的详细信息: NA 返回值: 按照本地时间返回星期几为指定日期. 例子: ? 1 2 3 4 5 6 7 8 9 10 11

JavaScript中reduce()方法的使用详解

  这篇文章主要介绍了JavaScript中reduce()方法的使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 JavaScript 数组reduce()方法同时应用一个函数针对数组的两个值(从左到右),以减至一个值. 语法 ? 1 array.reduce(callback[, initialValue]); 下面是参数的详细信息: callback : 函数执行在数组中每个值 initialValue : 对象作为第一个参数回调的第一次调用使用 返回值: 返回数组的减少单一个值

JavaScript中的bold()方法使用详解

  这篇文章主要介绍了JavaScript中的bold()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法将导致就好像它是在一个标签的字符串显示为粗体. 语法 ? 1 string.bold( ) 下面是参数的详细信息: NA: 返回值: 返回字符串含有标签 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <html> <head> <title>JavaScript String bold() Method</

JavaScript中的small()方法使用详解

  这篇文章主要介绍了JavaScript中的small()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法导致要显示在一个小的字体,就好像它是在一个标记的字符串. 语法 ? 1 string.small( ) 下面是参数的详细信息: NA 返回值: 返回字符串标签 例子: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <head> <title>JavaScript String small() Method<

JavaScript中的lastIndexOf()方法使用详解

  这篇文章主要介绍了JavaScript中的lastIndexOf()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法调用String对象之内返回索引指定的值最后一次出现,开始搜索在的fromIndex或如果没有找到该值则返回-1. 语法 ? 1 string.lastIndexOf(searchValue[, fromIndex]) 下面是参数的详细信息: searchValue : 一个字符串,表示要搜索的值 fromIndex : 在调用字符串内的位置,从开始搜索.

JavaScript中的slice()方法使用详解

  这篇文章主要介绍了JavaScript中的slice()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下 此方法提取字符串的一部分,并返回一个新的字符串. 语法 ? 1 string.slice( beginslice [, endSlice] ); 下面是参数的详细信息: beginSlice : 从零开始的索引位置开始提取 endSlice : 从零开始的索引位置结束提取.如果省略,切片中提取的字符串的末尾 注意:作为一个负指数,endSlice表示从字符串末尾的偏移. s