更改this指向的方法及其区别 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


更改this指向的方法及其区别

2019-8-21 释然 前端及开发文章及欣赏


今天给朋友们带来更改this指向的三种方法,以及它们的区别:

一:call用法
window.color = 'red';
document.color = 'yellow';
var s1 = {color: 'blue'};
function changeColor () {
console.log(this.color);
}
changeColor.call() //不传参数默认指向window
changeColor.call(window) //指向window
changeColor.call(document) //指向document
changeColor.call(this) //构造函数的this如果打括号调用默认指向window
changeColor.call(s1) //指向s1对象

//例二:
var Pet = {
words: '...',
speak: function (say) {
console.log(say + '' + this.words)
}
}
Pet.speak('123') //输出123...
var Dog = {
words: 'WangWangWang'
}
Pet.speak.call(Dog,'123') //输出123WangWangWang

二:apply用法:
window.number = 'one';
document.number = 'two';
var s1 = {number: 'three'};

function changeNum() {
console.log(this.number)
}
changeNum.apply(); //one
changeNum.apply(window); //one
changeNum.apply(document);//two
changeNum.apply(this);//one
changeNum.apply(s1);//three

//例二:
function Pet(words){
this.words = words;
this.speak = function(){
console.log(this.words)
}
}
function Dog(words){
Pet.call(this,words);//结果wang
// Pet.apply(this,arguments);//结果wang
}
var dog = new Dog('wang');
dog.speak(); //wang

apply与call的区别:
接收的参数不同
apply()方法接收俩个参数,一个是函数运行的作用域(this),另一个是参数数组。
call()方法第一个参数和apply()方法的一样,但是传递给函数的参数必须一 一列举出来。
语法:
apply([thisObj [,argArray]]);
调用一个对象的一个方法,另一个对象替换当前对象
call([thisObj [,arg1[,arg2[…,argn]]]]);
说明:
如果thisObj是null或者undefined的时候,默认指向window。
如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArray和thisObj任何一个参数,那么Global对象将用作thisObj。
call方法可以用来代替另一个对象的一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为thisObj指定的新对象,如果没有提供thisObj参数,那么Global对象被用于thisObj。

三:bind的用法:
var obj = {
name: 'WuXiaoDi'
}
function printName() {
console.log(this.name)
}
var wuXiaoDi = printName.bind(obj)
console.log(wuXiaoDi) //function(){...}
wuXiaoDi() //WuXiaoDi

//例二:
function fn(a, b, c) {
console.log(a, b, c);
}
var fn1 = fn.bind(null, 'Dot');
fn('A', 'B', 'C'); //A B C
fn1('A', 'B', 'C');           // Dot A B
fn1('B', 'C');                // Dot B C
fn.call(null, 'Dot');      // Dot undefined undefined

//例三:实现函数珂里化
var add = function(x) {
return function(y) {
return x + y;
};
};
var increment = add(1);
var addTen = add(10);
increment(2) //3
addTen(2) //12

小总结:
Function.prototype.bind(thisArg) - - ES5

能够返回一个新函数,该新函数的主体与原函数主体一致,但当新函数被调用执行时,函数体中的this指向的是thisArg所表示的对象。

Function.prototype.call(this.Arg,val1,val2, …)

调用函数执行,在函数执行时将函数体中的this指向修改为thisArg所表示的对象

val1, val2, … 表示传递给调用函数的实际参数列表

Function.prototype.apply(thisArg, array|arguments)

调用函数执行,在函数执行时将函数体中的this指向修改为thisArg所表示的对象,

array|arguments 表示调用函数的参数列表,使用数组或类数组的格式

区别:
bind与call和apply的区别:
返回值的区别:
bind的返回值是一个函数,而call和apply是立即调用。
参数使用的区别:
bind与call一样是从第二个参数开始将想要传递的参数一 一写入。但call是把第二个及以后的参数作为fn方法的实参传进去,而fn1方法的实参实则是在bind中参数的基础上再往后排。
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务
标签: 更改this指向的方法及其区别 « 网格基础手册 | WEB端控件规范——反馈类»


蓝蓝帝皇彩票官网 http://www.bjhbys.com

  1. 2019年8月(63)
  2. 2019年7月(61)
  3. 2019年6月(59)
  4. 2019年5月(32)
  5. 2019年4月(37)
  6. 2019年3月(43)
  7. 帝皇彩票官网2019年2月(26)
  8. 帝皇彩票官网2019年1月(45)
  9. 2018年12月(41)
  10. 2018年11月(40)
  11. 2018年10月(29)
  12. 帝皇彩票官网2018年9月(40)
  13. 2018年8月(87)
  14. 2018年7月(107)
  15. 2018年6月(86)
  16. 2018年5月(110)
  17. 帝皇彩票官网2018年4月(40)
  18. 2018年3月(35)
  19. 2017年8月(35)
  20. 2017年7月(45)
  21. 2017年6月(7)
  22. 帝皇彩票官网2017年5月(27)
  23. 2017年4月(51)
  24. 2017年3月(70)
  25. 2017年2月(65)
  26. 2017年1月(69)
  27. 2016年12月(55)
  28. 2016年11月(111)
  29. 2016年10月(92)
  30. 帝皇彩票官网2016年9月(53)
  31. 2016年8月(9)
  32. 2016年7月(4)
  33. 2016年6月(9)
  34. 2016年3月(19)
  35. 2016年2月(26)
  36. 2016年1月(30)
  37. 2015年12月(33)
  38. 2015年11月(35)
  39. 2015年10月(46)
  40. 2015年9月(43)
  41. 2015年8月(40)
  42. 2015年7月(33)
  43. 2015年6月(46)
  44. 2015年5月(58)
  45. 2015年4月(70)
  46. 帝皇彩票官网2015年3月(55)
  47. 2015年2月(17)
  48. 2015年1月(33)
  49. 2014年12月(21)
  50. 2014年11月(84)
  51. 2014年10月(94)
  52. 2014年9月(6)
  53. 2014年8月(1)
  54. 2014年7月(13)
  55. 2014年6月(66)
  56. 2014年5月(99)
  57. 2014年4月(88)
  58. 2014年3月(102)
  59. 2014年2月(68)
  60. 2014年1月(83)
  61. 2013年12月(106)
  62. 2013年11月(112)
  63. 2013年10月(61)
  64. 2013年9月(20)
  65. 2013年7月(13)
  66. 2013年6月(27)
  67. 2013年5月(48)
  68. 帝皇彩票官网2013年4月(39)
  69. 2013年3月(8)
  70. 帝皇彩票官网2013年2月(20)
  71. 2013年1月(31)
  72. 2012年12月(33)
  73. 2012年11月(31)
  74. 2012年10月(23)
  75. 2012年9月(8)
  76. 2012年7月(14)
  77. 帝皇彩票官网2012年6月(15)
  78. 帝皇彩票官网2012年5月(31)
  79. 2012年4月(24)
  80. 2012年2月(4)
  81. 2012年1月(8)
  82. 2011年12月(35)
  83. 2011年11月(32)
  84. 2011年10月(13)
  85. 2011年8月(1)
  86. 2011年6月(1)
订阅Rss
帝皇彩票开奖 桔子彩票网址 吉利彩票开奖 吉利彩票开奖 状元彩票平台 大象彩票计划 帝皇彩票平台 状元彩票官网 大象彩票APP 大象彩票APP