13期前端冲刺必备指南-this/call/apply/bind（万字长文）-六虎

前语

我们好啊，我是吒儿，每天尽力一点点，就能升职加薪当上总经理出任CEO迎娶白富美走上人生巅峰，想想还有点小激动呢。

这是我的第13期文章内容✍，希望能够把每一处知识点，说明白，（当然，假如哪一处不了解，能够在评论区进行讨论哦！）⏰o % t z |，计时开端！

假如您发现本文有协助，请您点赞，收藏，评论，留下您学习的足迹，我很愿意议论

话不多说，开端学习！！！

我会不断修正这篇文章内容，一起来讨论吧！

学习css布局

display特点，它是css中最重要的用于操控布局的特点，每N B F = J D个元3 E 8素都有一个默许的display值，这与元素的类型有关，大多数元素的默许值一般是block或inline。

每个元素都有一个默许的display

block元素叫做块级p c D R w s &元素；inline元素叫做行内元素

常用的dispy J $lay值，有时候为none，它是用来再不删去元素的情况下隐藏或显现，display:6 O m q Q Z J 7none。

display设置成none元素不会占有它本来应该显现的空间；运用visibility:hidden会占有空间，仅仅隐藏了，元素还在。

position特点：static是默许值，口诀，子绝父相。fixed，一个固定定位元| U ^ / ^ 4 N素会相关于视窗来定位，即便页面翻滚，它也会停留再相同的方位上。

css特点中的float，float可完成文字盘绕图片效果：

img {
float: right;
margin: 0 0 1em 1em;
}

cn 9 # o Z 7 ` ! Olear特点能够用于被操控的起浮元素，假如一个盒子增加了float: left起浮，能够运用cl1 } B s – X _ E bear: left清楚元素的向左起浮。

清楚起浮，clearfix hack，能够运用新的css款式：

.clearfix {
overflow: auto;
}

百分比宽度，m – 8 b ] m e百分比是一种相关于包括块| 1 | I h m o } {的计量单位C 1 c。

.clearfix {
float: right;
width: 50%;
}
nav {
float: left;
width: 15%;
}
section {
margiS G Cn-left: 15%;
}

呼应式设计是一种让网站针对不同的浏览器和设备“呈现”不同显现效果的策略，能够让网站在不同情况下呈现很好的效果。

inline-block为行内块标签

.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
c6 S $lear: left;
}
// 相同效果
.box1 {
display: inline-block;
width: 200px;
height: 100px;
margin: 1em;
}

flexbox是css3种的一种新的布局办法，用于满意现代web的复杂需求。

<div class="flex-container">b [ J q;
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</divD e I c !>
</div>
.flex-container {
display: -webkit-flex;q Y ` q /
display: flex;
width: 300px;
height: 240px;
background-color: Silver0 Y 7 s S;
}
.flex-item {
background-color: DeepSkyBlue;
width:1 m / 100px;
height: 100px;
margin: 5px;
}

JavaScript变量

1，Int整型
2，Float浮点
3，Boolean布尔
4，String字符串
5，Array数组
6，Object目标
7，Function函数
8，Regular Expression正则

驼峰命名法

悉数小写，单词与单词间用下划线切割
大小写混合，大驼峰，每个单词首字: @ – L y母大写，小驼峰，第一个单词首字母小写= g 0 F 9，其他首字母大写。

规矩

首字符，英文字母或许下划线；组成，英文字母，数字，下划线；（禁用，JavaScript关键词与保留字）

声明

显现声明，运用var变量名，（{没有类型，重复声明，隐式声明，不声明直接仿制}），（{先声明，后读写，先赋p 7 (值，后运算}）。

变量类型

值类型，占用空间固定，保存在栈中，保存与仿x – –制的( v ; S B h P u是值自身，运用0 S 9 a ` i K g =typeof检测数据的类型，根本类型数据3 = h是值类型。

引证类型，占用空间不固Q / 6 t p 7定，保存在堆中，保存与仿制的是指向目标的一个指针，运用instanceof检测数据的类型，运用new()办法结构出的目标是引证型。

效果域

大局变量，p ( y P 8 h m A包括，在函数体外界说的变量，在函数体内部界说的无var的变量；调用，在任G A 8 R P R T Z z何方位。

局部变量，包括，在函数内部运用varK f $ 2 w n声明的变p q B / n a x量，函数的参数变量；调用，当时函数体内部。

优先级，局部变量高于同名大局变量，参数变量高于同名大局变量，局部变量高于同名参数变量。

特性：疏忽块级效果域，大局变量是大局目标的特f 2 A M ! N W点，局部变量是调用目标的特点。

效果域链，内层函数可拜访外层函数局部变量，外层函数不能拜访内层函数局部变量。

声明周期：大局变量，除了被删去，不然一向在，局部变量，声明起到函数运转完毕或显现删去。回收机制，符号清楚，引证计数。

逻辑运算符

！逻辑非

回来true

空字符串
0
null
NaN
undefined

回来false

目标
非空字符串
非0数值（Infinity）

留意：逻辑非，连续运用两次，能够将恣意类型转为布尔型值

&&逻辑@ 2 k W R B .与

当第一个操作数是目标，回来第二个操作数
当第二个操作数是目标，第一个操作数值为true时回来该目标
两个操作数都是目标，回来第二个操作数

一个操作数为null时，回来null
一个操作数为NaN时，回来NaN
一个操作数为undefined，回来undefined

留意：当第一个操作数的值时false，则e A X R u } 7 e不对第二个操作数进行求值。

逻辑或 ||

第一个操作数是目标，回来第一个操作数
第一个操作数值为false，回来第二个操` X l作数
两个操作数都是目标，回来第一个操作数
两个操作数都是null，回来null
两个操作数都是NaN，回来NaN
两个操作数都是undefined，回来undefined

留意：假如第一个操作数值为true，就不会对第二个操作数求值。

JavaScript数组

增加

push()在数组结尾增加数组
unshift()在数组头q ) s V z % Y .部增加元素
concF v % r 9at()兼并两个数组

删去

pop()删去并回来数值的最终一个元素
shift()删去并回来数组的第一个元素

行列办法（先进先出）；栈办法（后进先出）。

splice()和sX ] D 1 2 mlice()

splice()

删去恣意数量的项：1，要删去的开端下标，2，要删去的项数
在指定方位刺进指定的项：1，开端下标，2，0（不删去任何项），3，要刺进的项。
替换恣意数量的项：1，开端下标，2，要删去的项数，3，要刺进的项

splice()办法，注解，该办法会改动原始数组。用s W j于增加或删去数组中的元素。

arrayObj6 @ ( m { W ect.splice(index,howmany,item1,.....,itemX)
var arr = ['a', 'b', 'c']
arr.splice(2,1) // 删去一个，回来删去元素的数组
['c']
arr.splice(2N ` x Q } 4 b 6,0) // 删去0个，回来空数组
[]
var array = [1,2,3,4,5];
array.splice(3,2);
console.log(array);
// 成果: [1,2,3]
var myFish = ['angel', 'clown', 'u H u %mandarin', 'sturgeon'];
v0 ] ` : 9 tar removed = myFish.splice(2);
// 从第 2 位开端删去一切元素
// 运算后的 myFish: [, $ ["angel", "clown"]
//h o + s l = x z , 被删去的元素: ["mandarin", "sturgeon"]

一切首要浏览器都支撑splice()

Array数组的splice()办法，它的效果删去，刺进，替换

刺进的用法

语法：array.splice(startiH , u,0,值1，值2...);
// 表明要在哪个方位刺进，0表明删去0个元素，因为刺进和替换都是由删去功用拓宽的，值1，值2，需求刺进的值
var array = [1,2,3,4,5];
array.splice(2,0,11,22);
// 成果：[1,2,11,22,3,4,5]

替换的用法

语法:array.splice(st* * U # Farti,n,值1，值2);
var array = [1,2,3,4,5];
array.splice(2,2,11,22);T f + d
// 成果：[1,2,11,22,n } ( A e } H 55]

slic3 . W ! | (e()功用，7 | ] p U } y |从已有数组中选取部分元素构成新数组

回来项的开端方位
回来项的完毕方位

特性，假如是负数，则用数组长度加上该值0 R |确认方位，启示方位实为数组的实践下标，完毕方位的实践下标为完毕数值减1p 0 g M。

Array.prototype.slice()

slice()办法回来一个新的数L + 9 M = Q组目标。原始数组不会被改动。这一目标是一个由begin和end决议的原数组的浅拷贝。

const animals = ['1', '2', '3', '4', '5'];
console.log(animals.slice(2));
// expected output: Array ["3", "4", "5"]
consoo + Q _ t 2le.log(animals.slice(2, 4));
// expected output: Array ["3", "4"]
console.log(and J Y ` .imals.slice(1, 5));
// expected] c 1 e ^ A output: Array ["1", "2", "3", "4x f T "]

slice(starK ` 8 ] ;t,end)，从start开端截取到end单不包括end] [ N H e ) $ ] (，回来值为截取出来的元素的集合(仅仅回来一个浅仿制了原i G L # o数组中的元素的要给新数组)

var fruits = ['a', 'b', 'c', 'd',V v V ) d 'e'];
vL u A aar citrusB 1 1 Q j g  8 c = fruits.slice(1, 3);
// fruits con# # g 4 {tains ['a', 'b', 'c', 'd'C ? # * D, 'e']
// citrus contains ['b','c']

slice办法用一个类数组目标/集合转化成一个新数组。

function list() {
return Array.prototype? O ( k.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]

在JavaScript中，几乎一切东西都是一个# ) /目标，除了str# ( a Qing，number 和 booleans这样不可变的原始值。

Array.prototype.slice

function myFunc() {
// 过错, arguments7 C d 9 2是一个类数组目! B ` ; V标, 不是一个实在的数组
arguments.sort();
// 借用 Array 原型中的` O J K 8 5 |办法 slice
// 它承受一个类数组目标 (key:value)
// 并回来一个实在的数组
var args =7 u ! Array.prototype.slice.callc Q + d ` F f I(arguments);
// args 现在是一个真实的数组c ; P,5 i ) 所以能够运用Array的sort()办法
args.sort()5 _ ~ 0 i @ ! n _;
}

数组排序，reverse()颠倒数组中元素的次序，sort()对字符数组或数字数组进行排序。

function co? D o b ] ^ 6 ympare(value1, value2) {
if(value1 < value2) {
return -1;
}else if(value1 > value2) {
return 1;
}else{
return 0;
}
}

数组转化2 ] W ^ x

toString()转化为字符串并回来
toLocaleString()转化为本地2 W [ V Q y B f格局字符串并回来
join()W q z 4 8用指定切割符切割数组并转化为字符串

toString6 . ,()函数用C X B _ Y k _于将当时目标已字符串的办法回来。该办法归于Object目标。

迭代办法：参数

every 假如该函o b l b B . E D数对每一项都回; 6 . ~来true，则回来true
filter 回来值为true的一切数组成员O S ~ G E
forEach 无回来值
map 回来每次函数调用的成果数组
some 有恣意一项回来true，则回来true

接收参数：

要在每一项上运转的函数
运转该函数的效果域目标

传入参数：

数组项的值item
该项在数组中的方位index
数组目标自身array

缩小办法：

reduce 从数组开端位开端遍历
reduceRight 从数组结尾开端遍历

reduceu s | [ T V ?() 办法接收一个函数作为累加器，数组中的每个值（从左到右）开端减缩，最终核算为] 0 z 4 – f一个值。

reduce() 能够作为一个高阶函数，用于函数的 compose。* o Q w v 9 l 2

留意: reduce() 关于空数组是不会履行回调函数的。

var numbers = [1, 2, 3,E   U _ 4];
numbers.reduce(回调函数);V 1 1 X =

const array1 = [1, 2, 3, 4];
const reducer = (accui @ + m 4 (mulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.redl 5 A ?  y ] n Cuce(reducer));
//  10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
//  15
var arr = [1,2,3,4];
// 求和
var sum = arr.reduce((x,y)=>x+y)
var sum1 = arr.reduce((x,y)=>x*y)

求数组项的最大值

var max = arr.reduce(function (prev, cur) {
return Math.max(prev,cur);
});

取i + g p d r P两值最大值后继续进入下一轮回调。

数组去重

arr.reduce(function(prev,cur,index,arr){
...
}, init);
arr 表明原数组；
prev 表明上一次调用回调时的回来值，或许初始值 inie 2 { Q m N f Ct;
cur 表明当时正在处理的数组元素；
index 表明当时正在处理的数组元素的索引，若供给 init 值，则索引为0，不然索引为1；
init 表明初始值。
arr.reduce(callback,[initialValue])
initialValue （作为第一r p R ` x P i O次调用 callback 的第一个参数。）

假如这个数组为空，运用reduce是什么情况？

var  arr =V 2 , [];
var sum = arr.reduce(function(prev, cu2 q zr, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
//报错，"TypeError: Reduce of empty array with n; v y t u + q ]o initial value"
var  arr = [];
var sum = arB ^ 0 &r.reduce(function(prev, cur, i, | R W ^ $ _ t (ndex, arr) {
console.log(prev, cur, index);
return prev + c) T U S W @ ]ur;
}，0)
console.log(arr, sum); // [] 0

js 中in，一般用来遍历目标, 也能够用来遍历数组

in效果，判别特点是否存在于目标中，在true，不在false。

in效果，判别数组，索引号便是特? N O点。

关于数组循环出来的是数组元素；关于目标循环出来的是目标特点；当‘目标’是数组时：“变量”指的是数组的“索引”；当‘目标’为目标D Z g p b & w q k是，“变量”指的@ s d G % V 4 I Y是目标的“特点”。

核算数组中每个元素呈现的次数

// 求总成绩
vaO L | { & 4 +r scoreReport = [
{
name: 'dada'P D S E [ ! S ],
score: 100
},
{j G a
name: '魔王哪吒',
score: 99
}
]
// for
var sum = 0
for(vB I far i = 0; i<scoreRepv # T P Po| i ] v rt.length; i++) {
sum += scoreReport[i].score
}

假如运用reduce

var sum = scoreReport.reduce(function(prev, cur) {
return cur.score + p9 J 9rep 1 e V &v
},0);

Vuex

Vuex中规矩只e Q l * ? A 4能在mutations里修正state中的数据，actions不能直接修正state

创立Vuex.St7 N { q !ore实例保存到变量store中，运用export default导出store

import Vuex from 'vue'
import Vuex from 'vuex'
Vue.use(` H B Z C S 6 DVuex)
const store = new Vuex.Store({
})
export default store

state

常常写的文件store.js

import Vue from .  N L z 9 `'vue'
impof O = +rt Vuex from 'vuex'
// import * as getters from './gette2 C c rrs'
Vue.use(Vuex)
const state = {
// 放置初始状况
a: 123
};
const mutations = {
// 放置我们的状况改动函数
};
export defauk S vlt new Vuex.Store({
state,
mutationE ) L g ~ # Zs,
// getters
})

this.$store.state来获取界说的数据

import Vuex fr? L E  $om 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = n_ j * d s Iew Vuex.Store({
state: {
count: 1
}
})
e[ H : O 4 e 0 E 3xport default store

import Vuex from 'vue'
import Vuex from '? { I 1 z ,  ] Jvuex'
Vue.use(Vuex)
co~ 7 E 3 d # @nst store = new Vuex.Store(n T 2{
statT } T n - + 9 }e: {
count: 1
},
getters: {
// gettL q d V u 0 M { 2ers适当与` 3 Ivu6 l W d Ue中的computed核算特点
getStateCount: function(stU 9 M $ O , 2 g ate){
return state.count+1;
}
}
})
export default store

要修正state中的值，需求提交mutation来修正

Vuex中的getter，就像核算特点相同，getter的回来值会依据它的依靠被缓存起来，而且只要当它的依靠值产生了改动才会被重新核算。

Getter 承受 state 作为G h g M ( Q * C g其第一个参数：

const storf Z Ze = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todL ? o gos.filter(todo => todB / 8 v O so.done)
}
}
})

getter 在经过特点拜访时，是作为 Vue 的呼应式系统的一部分缓存其中的
getter 在经过办法拜访时，每次都会去进行调用，而不会缓存成果。

某函数中{
this.$store.commit('add');
}
import Vuex fh . N ^rom 'vue'
import Vuex from 'vuex'
Vue.use(Vue5 | ~ E n Yx)
const store = new Vuex.Store({
state: {
counO M @ H j ^ C zt: 1w y w & ~
},
getters: {
// getters适当与vue中的com. H & l r }puted核算特点
getStateCount: function(state){
ret8 . J :  j D (urn state.count+1;
}
},
mutations: {
add(state) {
state.count += 1;0 t  { ` ^ : d
},
}
})
export default store
// xxx.vue
{F ] t g d{$store.getters.getStateCount}}

提交 mutatic p p U Mon-目标风格的提交办法，直接运用包括 type 特点的目标：

store.commit{ ^ + S({
type: 'increment',
amount: 10
})

Vuex中还有一个Actions，这个目的是不想上面那样直接修正store里边的值，而是经过去提交一个actions，然后再在actions中提交mutations中去修正状况值。

先界说actions提交mutations的函数

示例：

某函数中{
this.$storM  We.dispatch('addFun')
}
import Vuex from 'vue'
import Vuex from 'vuexJ 1 p ; + x $ 3 ^'
Vue.use(Vuex)
const store = new Vuex.StT 0 o x Nore({
state:6 ( : p + U % } {
count: 1
},
getters: {
// getters适当与vue中的computed核算特点
getStateC: ~ C o Z oountz U ) X = u: functio= K q F q Hn(state); P Z V ` 8 H{
return stateZ J = E 2 I.count+1;
}
},
mutatiP b y Y 6 $ ? =ons: {
add(state) {
state.count += 1;
},
},
actions: {
// 注册actions，适K H 0 / x M E ;当于vue中的methods
addF{ I . - n Sun(context){
// context接收一个与store实例具有相同办法的特点的context目标
context.commit('add')
},
}
})
export default store

运用mapState，mapGetters，mapActions，替代this.$store.state.4 w [ Z D b zcount和this.$sta 0 g a } - ,ore.dispatch('addFun')这种写法。

怎么运用：

import {7 g ( JmapState, mapGetteK @ B - t F 3 7 Ars, mapActionsJ X @ o V D l} from 'vuex';
/-  R n ; W l 5 g/ 运用computed 状况变化
computed: {
...mapState({
countdada: st1 = ! v nate=>state.count
})
}
// 将 store 中的 getter 映射到局部核算特点：
import { mapGetters } from 'vuex: - j'
export default {
/u o $ 2/ ...
computed: {
// 运用目标打开运算符将 getter 混入 compO S 1 ^ j , f J (uted 目标中
...mapGe8 E r y q i # Q 0tters([
'doneTodosCount',
b j m H'anotherGetter',
//1 L q ( ...
])
}
}
...mapGet% Y l v ? C Y k Iters({
// 把 `this.doneCount` 映射为 `` . X & s ~ ? utp b ) s 8 A 3 Nhis.$store.getters.doneT@ + Q 2 8 x ~ ) JodosCount`
doneCount: 'doneTod| + W 8 c YosCount'
})

JavaScC E f M h C ~ + erip5 i Lt中的this

this，是什么，这个，this关键字履行为当时履行环境的ThisBinding。

大多j I o 3 , S 4 G W数情况下，函数的调用办法决议了this的值。this指向是调用时决议，而不是创立时决议的。

//8 J g L  K thi1 a A x + x [s指向大局变量
function dadaqianduanY } C Z g + .() {
return this;
}
console.log(dadaqianduan() === window); // true

运用call()，apply()，this指向为绑定的目标上。

var person = {
name: 'dada',
age: 12
};
function sayHello(jF M h R @ 2 Qob) {
console.log(this.name + "," + this.age + "," + job);
}
sayHello.call(person, 'it'); // da1 - z 2 ] kda,12,it
sayHello.apply(person, [# B I Z'it']);

箭头函数，一切的箭头函数都没有自己的this，并指向外层。箭头函数会捕获其所在上下文的this值，作为自己的this值。(函数内部，this的值取决于函数被调用的办法)

箭头函数的this，总是指向界说时所在的目标。不是运转时所在的目标。

fun{ b u o D Dction da() {
setTimeout(()=>{
console.log('this',this.id)
},1000);
}
da.call({id: 12});

箭头函数位于da函数内部，只要da函数运转后，才会按p G . / O q ^照界说生成，sY T q Ao，da运转时所在的目标，刚好是箭头函数界说时所在的目标。

（值得讨论的一句话），在箭头y f } . T s函数里运用this，就像运用一般变量相同，在箭头函数的s0 ) { G Ucope内找不都会一向向父scoo @ # c w f t S gpe寻找。

this又指向大局变量，如下：

感谢掘金网友：

var na@ 8 ? y )me = 'da';
var persoi G E ~ S l m o pn = {
name: 'dadaqianduan',
funY b I ,: function() {
ret, t v ourn this.name;
}
}
var getName = person.getName();
console.6 S 7 .log(getNamc 0 N Y O He` Z } t ^ c w =()); // da
// 改为
var name = D g b  2'da';
var person = {
name: 'dadaq ` n S qqianduan',
getName: function() {
return this.name;
}
}
var fun = p? ? Y e Q 4erson.getName;
console.log(fun()); // da

作为一个结构函数，this被绑定到正在结构的新目标。

function Person(name) {
this.nam2 T J m ` k G h Ne = name;
this.age = 12;
this.sa, J = h p Y 1 n ry = fk G K ~unctB  F ^ c W cion() {
console.log(this.name + ":" + this.age);
}
}
var pserson = neZ o 0 i % b Lw Person('dadaqianduan');
person.say();

this{ ; B 8 F w p 9的几种调用场景：

var obj = {
a: 1,
b: function() {
console.log(this);
}
}

当作为目标调用时 8 M 0 W – n，指向该目标obj.b(); // 指向obj
当作为函数调用c Z y K l Z K U V时，var b : C # & I w J = obj.b; b(); // 指向大局window
当作为结构函数调用时，var b = new Fun(); // this.指向当C b 2 % d & 8 W f时实例J ! A x g q目标
当作为call与appl) L . 1 z ay调用 obj.b.applyz | F(objecM i Y Ct, []); // this指向当时的object

示例：

var a = dadaqianduan;
var o- z + 4 / lbj = {
a: dada
}
fun5 + Ection fun() {
console.log(this.a);
}
fun(); // dadaqianduan
fun.call(obj); // dada

function da(a,b,c) {
console.log(arguments);
// 运用cal1 s q 5 .l/apply将arguments转化为数组，回来成果_ ?  | L P v ?为数组
var arg = [].slice.call(arguments);
}
da(1,2,3)

大局上下文，非} [ k J J n o严厉办法和严厉办法o n i {中thisY ^ _ * p指向顶层目标。

this === window // true

函数上下文

var name% r x R d + C d = 'dadaqianduan';
var fun = function() {
console.log(this.name);
}
fun(); /F ( ) j x d/ 'dadaqianduan'

call()办法运用一个指定的this值和单独给出的一个或多个参数来调用一个函数。

该办法的语法和效果与apply()办法类似，只要一个差异，便是call= W % ~ d J k _ 1()办法承受的是一个参数列表，apply()办法承受的是一个包括多个q , K R 2 *参数的数组。

示例：

function da(name, age) {
thiso u T w - C.name = name;
this.age = age;
}
function dada(name, age) {
da.call(this, name, age);
tx g - b / 8 ) lhis.job = 'it';
}
console.log(new dada('dadaqi# q H b a w ianduan, 12').name);
// dadaqianduan

语法：

function.5 R D f G 7call(thisArg, arg14 v 8 m f, arg2, ...)

参数:thisArg，在function函数运转时运用的this值，this或E * @ ~ { T许不是该办法看到的实践值。arg1,arg2,...指定的参数列表。

回来值，运用调用者供给的this值和参数调用该函数的回来值。若该办法没有回来值，则回来undefined。

描述：

call()答应为不同的目标分配和调用J w . U w归于一~ y t P k 6个目标的函数/办法。供给新的this值给当时调用的函数/办法。你能够运用call来完成承继。

运用call办法调用父结构函数

function Person(name, age) {
this.name = name;
this.age = age;
}
function Child1(nc H O ? l W ]ame, age) {
Person.call(this, name, age);
this.eat = 'beff';
}
function Child2(name, age) {
Person.call(this, name, age);
this.eaA w ; t = 'food';
}
va& e , Mr da1 = new Child1('魔Y Q ) y : s王哪吒1', 12);
var da2 = new Child2('魔王哪吒2', 12);

运用call办法调用匿名函数

var person = [
{
name: 'da1',
age: 1
},
{
name: 'da- % -2',
age: 2
}
];
for(var i=0; i<person.length; i++) {
(function(i){
this.fun = function() {
console.log('dadaqianduan');
}
this.fun();
}).call(pers, o O q F 6 B kon[i], i);
}

class Person{
construct) y J ! ) _ r v Yor(name) {
this.name = name;
}
fun(){
ci ; U B Ronsole.log(this.name);
}
}
let da = new Person('达达前端'M ^ w e w 3);
da.fun(); // 达达前端

关于箭头函数调用，没有自己的this,super,arguments,new.~ J ) Ktarget绑定，不能运用neN s x J 1 #w来调用，没有原型目标，不能够改动this的绑定，形参名称不能重复。

this的绑定目标，经过new调用绑定到新创立的目标，return函数或目标，回来值不是新创立的目标，而是显式的回来函数或目标；call或applR 6 +y的调用，非严厉办法，为null和undefined；4 z ! v 4 K目标上的函数调用，绑定到这个目标；一般函v 9 z u 3 R Y M数的调用，严厉办法，为undefined。

留意：（一起来讨论）
也能够这样记住：目标中有this，目标中的办法（函数），以及一般函数来记住。

绑定比如，this在非严厉办法下this指向大局目标，严厉办法下this绑定到undefined，隐式绑定，obj.fY [ – H 1 ; woo()的调用办法，foo内的this指e H Y ` B ) m l向了obj。

显现绑定，call()或apply()办法直接指定this的绑定目标，箭头函数中thiC 5 x b ds指向由外层效果域P ] z z [ $ # [决议的。

示例：

var a = "dadaqianduan";
function foo () {
console.log(this.a)
}
foo();
window.a = "dadaqianduan";
function foo() {
console.log(this.a)
}
window.fM a G : Too();
// dam U v } _ s J # Rdaqianduan

严厉办法，仅仅使得函数内的this指向undefined，而不会改动大局中的this指向。只要var会把变量绑定到window上，而let和const不会。

let a = "d% ] Jada"$ y C % R U f
const b = "dada1"
function foos F l . () {
console.loge / p x c { g H(thW h his.a)
console.log(this.b)
}
foo();
console.log(wind D r * ) 5 I +ow.a)
// undefined
// undefined
// undefined

var a = "da";
funcs e p W r [ rtion fun() {
var a = "da1";
console.lt & D 7 k 1og(this); //K ` c 4 d window
console.log(this.a); // so, window.a -> da
}
fun(); // windoO p / / j B [ w @wJ # v p调用的fun

var a = "da";
function fun() {
// this指向window
var a = "da1";
function inner() {
console.log(this.a);
}
inner();
}
fun(); // da

谁最终调用函数，函数内的thW c K T % 3is指向最近原则

示例：

function fun() {
console.log(this.a)
}
var obj = {
a: 'da',
fun
}
var a = 'da1';
obj.fun();^ e Q P  O 4 & // da
// var obj = {fun} => var obj = {fun: fun}
obj目标引证fun() 赋值 obj.fun上，调用的是obj目标，打印的便是obj中的a
var obj = {
a: 'da',
fun: function() {
// thi/ I ( E = x ] xs指向obj
console.log(thw / + G ? *is.a)
}
}
vaJ h 2 1 [ |r a = 'da1'
obj.fun()

function fun() {
console.log(this.a);
};& @ 3 y s
var obj = {
a: 'da',
fun
};
var a = O & H ^ # 5 4 o `'da1';
var fun1 = obj.fun;
obj.fun(); // this指向obj ->J l j; da
fun1(); // 指向obj.fun(); ，但调用的是window目标，so，this的指向为windo ( x * M }w
//6 ) r / O % ] u } window.fun1()

function fun() {
console.log(this.a);
};
var obj = {
a: 'da',
fun
};
var a = 'da1';V P P $ . Y ,
var fun^ 5 f ? q Y + 6 51 =Q ^ I $ X 2 = j obj.fun;
var ojb1 = {
a: 'da2',
fun2= 7 e g 6 R | 0: obj.fun
};
obj.fun(); // this指向obj -> da
fun1(); // obj.fun() -o z o } 6 @ a> 调用者为window，so，this指向window，-> da1
obj1.fun2(); // 调用者为obj1，so，this指向obj1

function fun() {
console.log(this.a);
};
functioX { G xn d^ ? J w ^ = C 8oFun! Y S C b(fn) {
console.log(this);
fn();
};
var obj = {
a6 0 ) . D , *: 'daF O T k 8 i /',
fun
};
var a = 'da1A J K b a 7  D #';
doFun(obj.fun); // obj.fun(); so，里边的this指向window -> da1~ c / D L s

function fun() {
console.log(this.a);
};
function doFun? 4 K )(fn) {
console.log(this);
fn();
}I O 6 c X 1 I 1 F;
var obja j S # n  = {
a: 'da',
fun
}
var a = 'da1';
var obj1 = {
a: 'da2',
doFun
};
obj1.doFun(obj.fun) // obj1目标调用doFun()，传参数obj.fun，this指向obj1.
// obj.fun() 打印 da1 
原因：把一个函数作为参数传递给另一个函数，会产生隐式丢掉，便是回调函数丢掉this绑定。
// 严厉办法下，会绑定到C m 1 8 W f ? g 9undefined

call,apply,bind

运用call和apply的函数会直接履行，bind是创立一个新的函数，需求手动调用才行。

示例：

function fun() {
console.log(this.a);
};
var obj = {
a: 'da'
};
var a = 'da1';
fun() $ p + k ~ I; // da1
fun.call(obj); // da
fun.apply(obj); // da
fun.bind(obj); // 运用bind创立一个新的函数，不会履行

示y v W . r 0 y . 2例：

假如call,apply,bind接收 参数 为空或许null，undefined，会疏忽这个4 e + C } b t参数
f= A C )unction fun() {
console.log(this.a);
};
var a = 'da';
fun.call(); // da
fun.call(null); // da
fun.call(undefined); // da

v! D Q ? e ) &  iar ojb1 = {
a: 'da'
};
var ob7 M I : 3 S Uj2 = {
a:Z 1 6 O t 3 - p * 'da1',
fun1: function() {
console.log(this.a); // da1
},
fun2: function() {
s) : X ~ 6 cetTimeout(function(){
console.log(this);a g u C K , + R // window
consol` b 7 ce.log(! R 2 !this.a); // window.a -> da2
},0)
}
}
var a = 'da2';
obj2.fun1(); // dal ) v ! ) k 8 W1
obj2.fun2(); //

var obj1 = {
a: 'daP } N G J 2 g'
};
var obj2 = {
a: 'da1',
fun1: function() {
console.logD U  I y S(this.a); // da1
}] C J 5 Z,
fun2: function() {
setTimeout(function() {
console.log(this); // so，{a:'da'}
console.log(this.a); // so，da
}.call(obj1), 0) // 绑定外界目标ob} m @j1
}
}
var a = 'da2';
obj2.fun1();
oa Q P S _ | Ubj2.fun2();
// 运用 obj2.fun2.call(obj1) 即改动fun2函数中的this指向

var obj1 = {
a: 'da'
};
var obj2 = {
a: 'da1',
fun1: function() {
console.log(this.a); // da1
},
fun2: function()l E A U _ {
function inner() {
console.log(thg $ k ( K =is); // window{...}
console.log(this.a L X Fa); // da2
}
inM r ^ L O R F ~ Zner();
}
}
var a = 'da2T x % ` e m';
obj2.fun1B z 0 b a X m (();
obj2.fun2();

function fun() {
console.log(this.a);
};
var obj = {
a: 'da'
}J 5 m;
var a = 'da1';
fun(); /= g M U K g E/ da1
fun.call(obj); // da
fun().call(ob] h P W c a  lj);  // 履行fun() -> da1，fun()函数回= z L K & ,来值履行.call(obj)会报错
// fun()函数的回来值undefined ->S $ * ` B I L _ P 函数的回来值.call()

function fun() {
console.log(tk 5 chis.aQ 1 $);
return functiJ R ) V 2on() {
console.log(this.a);
}
};
var obj = {
a: 'da'
};
var a = 'da1';
fun(); // da1n ^ z t p F H K z -> 回来一个匿名函数，没有调用，能够运用fun()(); 调用匿名函数
fun.call(obj); // da -> 回来匿名函数，没有调用
fun().call(obj); // fun(),成果值 da1，回来d W p一个匿名函数,并绑定ob[ V 4 U . Fj,则this绑定到了obj，this.a 为obj. h { ` n M 5.a -> 成果值为da
//@ v ) & fun().call(obj); -&N b ( , % p Q w ,gt; da1,da

bi^ I q B p e , 5 3nd绑定，仅仅回来一个新的函数

示例：

function fun() {
conf * + h - ) # .sole.log(this.a);! % 
return function() {
console.log(th6 W @ Xis.a);
}
}
var obj = {
a: 'da'
};
var a = 'da1'e d x 5 e e ~;
fun(); // da1
fun.bind(obj); // 不会履行，回来一个新函数
fun().bind(obj); // da1 -> 匿名函数绑定obji x ;，没有调用。

function fun() {
console.log(this.a);
return function()  {
cons, W F U 6 D oole.log(this.a);
}
}
var obj = {
a: 'da'
};
var a = 'da1';
fun.call(obj)(); // dah h g 6 n , da1
// fun绑定了obj,this指向了obj，匿名函数调用

var obj = {
a: 'da',
fun: fuh - {nction() {
console.lo u N  }g(this.a);
return function() {
console.log(this.a)
}
}
};
var a = 'da1';
var obj1 = {
a: 'da2'
};
obj.fun()(); // 函数中的this.a , 匿名函数中的 k ] 8 ~ !this.a->window
obj.f8 z Dun.call(obj1)(- a O); // 绑定obj1，匿名函数回来->window
obj.fun().call(obj1); // da1 ,绑定obj1，so, this指1 o ; ! - P向obj2

var da1 = {
name: '魔王哪吒',
sayHello: function(age) {
console.log(this.name + age);
}
};
var da2 = {
na= u $me: '达达前端',
};
da1.sayHello(1b L j2);
// apply,call
da19 C i X H | Y # .sayHelz U & K s y ,lo.apO  6 p D ; U Y Xply(da2, [12]); // 达达前端12
da1.sayHello.call(da2, 12); // 达达前端12

模仿
Function.prototype.applyFun = function(context) {
context.fn = this;
context.fn();
// 从上下文中删去g k h函数引证
delete context.fn;
}
// 参数
Function.prototype.applyFun = function(context) {
context.fn =Q 4 ( r 8 } O C . this;
var args = arguments[1];
contV h c zext.9 N e Y / E ?fn(args.join(',')); // join -> string
// 履行这个函数，用ES6的...运算符将arg打开U ] @ Y _ R
// context.fn(...args);
delete context.fn;
}

var a = 'da';
function sayHello() {
conP % c 5 e Nsole.log(this.name);
}
sayHello.apply(null); // 传null或许不传参数，视为指向window
var a = 'day * Q';
function sayHello() {
console.log(this.name);
}
sayHello.apply(); // 传null或许不传参数，视为指向window

重写特点，ES5：

var a = {
name[ 7 o 9 e c * 9: 'da'
};
a.name = 'da1'

es6引入一种原始数据* + E ? G类型Symbol，表明绝无仅有的值,Symbol函数能够接收一个字符串作为参数。Symbol函数不能运用new指令，生成Symbol是一个原始类型的值，不是目标。

示例：

var s1 = Symbol();
var s2 = Symbol();
s1 === s2 // false
var s1 = Symbol(r ! p t o"foo");
var s2 = Symbol("foo");
s1 === s2 // false

Symbol值作为目标特点名时，不用点运算符。

示例：

var mySymbol = Symbol();
// 第一种写法
var a = {};
a[mySyK { .mbol] = '魔王哪吒c k j + e = ';
// 第二种写法
var a = {
[mySymbol]: '魔王! ! q 1 x V 1 $哪吒'
};
// 第三种写法
var a = {};
Object.defineProperty(a, mySyw y 8 * Embol, { value: '魔王哪吒' });
// 以上写法都得到同样成果
a[mySym) s D L K # Sbol] // "魔王哪吒"

var a = {};
var name = Symbol();
a.name = 'da1';
a[name] = 'da2';
console.log(a.name,a[name]);             //da1,da2

var obj = {
a: 'da',
fun: function(b) {
b = b || t/ ! lhis.a
return function (c) {
console.log(this.a + b + c)
}
}
}
var a = 'da1';
var obj1 = {
a: 'da2'
}
obj.fun(a).call(obj1, 1)
// obj.fun(da1) -> da1传给参数b, call改动了this，绑定目标ojb1，so，this的指向改动，this.a指: $ T j =向目标obj1，为da2。
// 最终成果,da2 da1 1
obj.fun.call(obj1)(1)
// obj中fun函数内的this绑定目标Obj1，this指向了obj1
// obj.fun.call(obj1)没有传递参数， so， 因b = b || this.a
// so，b为(记住绑定了obj1)da2。最终调用匿B D H =名函数，匿名函数内的this指向window
/G i F/ da1(this.a为指向window),d) 3 0a2,1


function fun1 () {
console.log(this.a);
};
var a = 'daD % h ) 4';
var obj = {
a: 'da1'
}
var fun2 = funy x e H K z & Wction() {
fun1.call(obj);
};
fun2(); // da1
fun2* q b I ^.call(window); // da1

function fun1(b) {
console.log(`${th6 K Kis.a} + ${b}`)
return this.a + b
}
var a = 1
var obj =C ` ! W / {
a: 3
}
var fun2 = function () {
return fun1.call(obj, ...arguments)
}
var daR j & -da = fun2(5)
console.log(dada)
'3 + 5'
8
// fun2(5)-> fun1绑定目标obj，so，this.a为obj中的a为3，5带入即可P B k  { A h k y

function fun(item) {
console.log(item, this.a);
};
var obj = {
a: '魔王哪吒'
};
var a = 'dada'
var arr = [1,2,3];
// forEach, map,i B A e filter的第二x 7 X X w 4个参o 8 Q s $ m C数能够绑定this的
arr.filter(function(i){
console.log(i, this.a);
return i>2
},obj)
1 '魔王哪吒'
2 '魔王哪吒'
3 '魔王哪吒'

functi? 0 *on da (name) {
thB [ $ Y y w His.name = name
};
var name = 'da^ m ` S P ( ^ G }1';
va- p y f & ) n y hr dada = new da('da2');
console.log(dada.name) // da2
// new 调用da函数，结构了一个新目标dada，dada目标绑定到da调用中的this

var name = '魔王哪吒$ ! e % b X ~';
func: O 3 @ .tion fun (name) { // 结构函数
tH 5 [ d x 9his.name = name;
this.daFun = function () {
console.log(this.name);
return function () {
console.log(this.name);
}
}
}
var da1 = new fun('魔王哪吒1');
var da2 = new fun('魔王哪吒2');
d, p 1 5a1.daFun.call(da2)()
da1.daFun($ k : $).cal| 8 ? 0 y p zl(da2)

改动思路，改动主意：

var name = '魔王哪吒';
// var da1 = new fun('魔王哪吒1');
va` f Fr da+ E O {1 = {
name: '魔王哪吒1',
daFun: functiol T 6  vn() {
console.log(this.name);
return function () {
console.log(this.name);
}
}
}
// var da2 = new6 & a 8 u M fun('魔王哪吒2');
var da2 = {
na ) w 2 9me: '魔王哪吒2',
daFun: function() {
con% 3 W asole.I 9 k Slog(this.name);
return function () {
console.log(this.name);0 ] w 2 ^ ] K j
}
}
}
da1.daFun.call(da2)() // daFun函数绑定了da2，指向了da2，so，this指向了da2，输出 魔王哪吒2，最终调用()，内部回来的匿名函数由window调用，打印出 魔王哪吒
// 魔王哪吒2 ，魔王哪吒
da1.daFun().call(da2)
//0 i 8 l R da1.daFun().call(da2) 将匿名函数的thT * f n s 3 o 0is绑定到了da2上
// da1.daFun() -> 魔王哪吒1 -> 魔王哪吒2

箭头函数

箭头函数里的this，由外层效果域决议，指向函数界说时的this，非履行时。（讨论）

var obj = {
name: '魔王哪吒',
fun1: () => {
// this指向由外层效果域决议，指向函数界说时的this，为window
console.log(this.name)
},
fun2: func_ O a ution() {
console.log(this.name)
ret3 $ p 5 ~urnD N 7 () => {
console.log(this.name);
}
}
}
var name = '达达前端';
obj.fuc * = w } | 4 qn1(); // this.nak ^ *me -&gR [ O ! V K g = Zt; 达达前端 ，调用时外{ d g层，则外层效果域时windo6 n y = } rw
obj.fun2()(); // this.name , this.name(匿W C 9 & y #名函数)
// 先看obj.fun2() ，然后了解obj.fun2()()
// 这儿的第一个指向调用它的目标 objt g j O , k ， so，是 魔王哪吒，里边的匿名函数是箭头函数，箭头函数指向界说时，便是this的外层效果域决议X Q O & I 1，可见是fun2这个函数，so，那么匿名函数里的this会和fun2函数里的this相同。也是 魔王哪吒U - B q。

var name = '达达前端';
var obj1 = {
name: '魔王哪吒1',
fun: function(H 0 J H q 2 { y D) {
console.log(this.name)
}
}M k #  P
var obj2 = {
name:~ W % s z '魔王哪吒2',
fun: () => {
cons7 ? ole.log(this.name)
}
}
obj1.fun() // 由obj1调，so，魔王哪8 E } u s : e z吒1
obj2.fun() // this界说时指向了window，so，达达前端

var name = '达达前端';
va_ l j # 1 { 0 Jr obj1 = {
name: '魔王哪吒1',
fun: functionx e I u % O n () {
console.log(thisM  G $.name);
reG V  , e T %turn function() {
console.log(this.namQ ` | s 0 # C @e);
}
}
}
obj1.fun()();
// obj1.fun() ->j M v a - x u %; 魔王哪吒，调用匿名函数（）,第二个thiW c j [ & g n l Qs.name调用外层，so，为达达前端
// 魔王哪吒，达达前端
var obj2 = {
name: '魔王U , w哪吒2',
fun: function() {
co4 r { @nsole.log(this.name);
return () => {
console.log(th Z liv 5 0s.name);
}
}
}
obj2.fun()(); // obj2.fun() 第一个值为 魔王哪吒2， 第二个箭头函数，thP ] jis界说时指向外层，即为obj2中的thi: n P a 7 - 9 )s，so，为 魔王哪吒2
// 魔王哪吒2，魔王哪吒2
varZ o + S R / T ~ S obj3 = {
name: '魔y z % ~ d 6 h G王哪吒3',
fun: () => {
console.log(this.name)5 d J L * 3 a h;
return function() {
c] u Qonsole.log(this.name)
}
}
}
obj3.fun()(), G 9 | -; // 达达前端，达达前端
// 第一个this.naY  M 1me ，箭头函数/ k $ k由外层效果域决议E g A z D (  x，界说时指向window，内存函数，由调用者决议，so，也是 达达前端。
var obj4 = {
name} q A ] 9 o :: '魔王哪吒4',
fun: () => {
console.log(this.name);
retz n j  , E k ourn () => {
coJ P p L D c $ #nsole.log(this.name);
}
}
}
obj4.fun()(); // 达达前端，达达前端，界说时，不是调用时

var name = '达达前端';
function dada (name) {
this.name = name;
this.fun1 = function^ $ R T() {
console.log(this.name);
}
this.fun2 = () => {
// 指向外层效果域函数dada
console.log(this.name);
}
}
var da2 = {
name: 'da2',
fun2: () => {
console.log(this.name);
}
}_ 4 W + j K z
var dh v X 6a1 = n9 b 2 { Z !ew dadI m p K - %a('魔王哪吒');
da1.fun1(); // 魔王哪吒，一般函数，调用者是dada，（由最终调用者目标决议）
da1.fun2(); // 魔王哪吒，箭头函数，由外层效果域决议，函数界说时
/I c Y v * M n 2 y/ 外层效果域是函数d= C } 2 j u 3 F fada，结构函数，new 来生成目标da1，E ] } V指向了dada
da2.fun2(); // 达达前端,` w v V u o R Z da2的效果域在window下w j P x，so，建呕吐函数内6 q _ r * _this指向window

var name = '达达前端',
function dada0 Z I i Z V ! w(name) {
this.namK r g $ B Z t 5e = name;
this.fun1 = functiou X w sn() {# a k % // 一般函数
console.log(this.name);  // 达达
return function() { // 匿名函数
console.log(this.name); // 达达前端
}
}
this.fun2 = function() { // 一般函数
consw a @ u Wole.log(thg D X % S n R * tis.name); // 达达
return () => {% x I @ p T E // 箭头函数
console.log(this.name); // 由外层决议，外层便是这个dada函数，值为 达达
}
}
ts I ^his.fun3 = ()F @ k Y a U . n => { // 箭头函数
console.log(this.name); // 外层决议2 = = i，是dadan g 2 1，K / p @ S g z ^so，达达
return function() { //g M U S B { 一般函数
console.log(this.name) // 由调用者决议，da1L Z z.foo3()回来一个Y j : p ? P p X ,一般函数，调用者外层字面量da1，在window中，so，达达前端
}
}v Y q % Y i G n c
this.fun4 = () => { // 箭头函数
console.log(this.name); // 界说时，this指向外层，达达
return () => { // 箭头函数
console.log(this.name); // 指向外U m A U x G 2 ] !层,达达
}
}
}
var da1 = new dada('达达');
da1G ` y L.fun1()(); // 达达 达达前端
daS 5 ^ e / u1.fun2()(); // 达达 达达
da1.fun3()(); // 达达C 4 G r c O L 达达前端
da1.fun4()_ ; 2(); // 达达 达达

箭头函数中的this，无法用bind，call，apply函数来直接修正，能够经过改动效果B & M J ~ D域中this的指向来修正| ( X。v A H C 2 n ! `

示例：@ v $ 9 $ ] x U

vW } [ W 4ar nam$ P p oe = '达达前端';
var obj1 = {
name: '达达1',
fun1: funct& O v x C 8 H [ Tion() { // 一般函数
console.log(this.name);
return () => { // 箭头函数
cond m v y 7 dsole.log(this.namU | U ? ) %e);
}
},
fun2: () => {
// 箭头函数
console.log(this.name);
return function() {
// 一般函数
consolev G 2 A !.log(this.name);
}
}
}
var obj2 = {
name: '达达2'
};
obj1.fun1.call] 1 ^ E ( 1 0 *(obj2)() // .call绑定了目标obj2，第一个()运转，达达2，第二个()，箭头函数，由外层的fun1一般函数中的this相同，so，达达2
// 达达2 达达2
obj1.fun1().cas = Pll(obj2) // 第一个调用ol q 3 A : (bj1中，达达1，回来箭q B T F & F头函数，.call绑定目标obj2，想改动this的指向obj2，可是无效，因为是界说时就决议了的，this的履行仍是obj1，so，输出 达达W P a Q1
// 达达1 达达1
obj1.fun2.call(o@ X c u Zbj2)() // obj1字面量，.call绑定obO . /j2无效，第一个是箭头函数，外层效果域windoY ] C F _ 3 ) Lw，达达前端，达达前端，obj1.fun2.call(obj2) 指向外层window
// 达D E D B j k H # %达前端 达达前端T U C Y { a i
obj1.fun2().call(obj2) // 第一层，箭头函数，第二层，一般函数，第一层直接是外层效果域window，达达前端
// 第二层绑定一个了obj2，3 s r m ! d V *so, 达达2
// 达达前端， 达达2

留意：字面量创立的目标，效果域是wiN b 3 L w S c 9 }ndow，假A O f k A $如| ] t J w v r U ^是箭头函数，this指向window

示例：

var name = '达达前端';
var da1 = {
name: 'dada1',
fun1: functionp ~ p() { // 一般函数
console.} j X c ,log} / B n G f }(this.name);
},
fun2: () => console.log(this.name); // 箭头函数
fun3: fun1 w nction[ 8 & 2 ` d v() { /q Q +  &/ 一般函数
return function() { // 匿名$ Y : h & p d ` V函数，一般函数
console.log(this.name);
}
},
fun4: function() { // 一般函数
return ()f 6 6 R T => {7 5 1 // 箭头函数
console.log(this.name);
}
}
}
var da2 = {
name: 'dada2'
};
da1.fun1(); // 字面量da1, 一般函数，调用者da1，so，指向da1，dada1
// dadaQ j j # 1 B ! n1
da1.fun1.call(da2Y  n)C - N G; // this.name经过.call绑定了da2,so,dada2
// dada2
da1.fun2(); // 箭头函数% v S 0 ( h b 9，指向window，so，达达前端
// 达达前端
da1.fun2.call(da2); // .car R ` Bll想改动指向，但无效，达达前端
// 达达前端
da1.fun3()(); // 匿名函数，指向window，达达前端
dai L / p . = z ,1.fun3.call(da2); // 回来匿名函数，指向wind6 x I &ow，达达前端
da1.fun3().call(da2); // 
da1.fun3() // 经W E j ) E过.call绑定da2，回来这个一般B F /函数，绑定da2，so,dadat ^ t2
//
()+ v s {
console.log(this.name)
}
//
// dada2
//
fun. / H Pction() { // 一般函数
return function() { // 匿名函数，一般Z V ^ O ~ F `函数
console.lW ~ O . u H r Jog(this.name);
}
},
//
da1.fun4()(); // this指向界说时，da1，so，dada1
// dada1
da1.fun4g y |.call(da2)(); // 一个fun4经过绑定da2，再运转()，那么function() { 里的回来箭头函数 } ;外层functG b )ion绑定了指向da2，dada2
// dada2
dat I 3 Y F q V }1.fun4().call(dax * ) .2); // 界说时，fun4()，运转了，this.D B % H 4 F [ Tname中回来 dada1
// dada1

var name = '达达前端';
function dada(_ ) d 8 ? W A Sname) {
this.name = name;
this.fun1 = function() {
co M a T } fnsole.log(this.name);
},
this.fun2 = () => console.log(# W z 7 [ _this.name),
this.fun3 = function() {
return function() {
console F t V k (e.log(this.name)
}
}，
this.fun4 = function() {
return () => {
console.log(this.D P Yname)
}
}
}
v` M + K Iar da1 = new dada('1');
var da2N 6 K k C 9 = nW o m N iew day B ] @ 5 lda('2');
da1.fun1(); // new 绑定了dada，1
da1.f, A ( ` ` 5 4 Iun] o Z1.call(da2); // 绑定了 da2 ， 2
da1.fun2(); // 箭头函数，外层仍是dada ,new dada绑l 8 D c $ J F H定dada，1
da1.fun2.call(da2); // .call想改动this指向，可是关于箭头函数无效，1
da1.fun3()(); // 回来一个一般函数，this指向window，达达前端
da1.fun3.call(das , x 62)()C q R & G ^ j; // 绑定da2,可是，相同指向window，达达前端
da1.fun3().call(da2); // 绑定daN ~ , c2,回来运转()，绑定da2，this指向da2，2
// da1.fun3()
 () {
console.I k 3 5log(thiD W 9 d 6s.name)
}
//
da1.fun4()();Y r 9 0 Y ( - y O // 回来箭头函数，调用da1，指向外层da1，1
// da1.fun4();
// ->回来
() => {
console.{ K q & M zlog(this.name)
}
da1.fun4.cal^ l k h g Y V K ?l(da2)(); // .call()绑定了da2，调用()，外层改动为da2，2
da1.fun4().q - x 1 F ;call(da2);
// da1.fun4();
// ->回来
() => {
console.log(this.name)
}
// 界说时，指向了da1，new dada('1')新目标，so，为1

var name = '达达前端'
function Person (name) {
this.name = name
this.obj = {
name: 'obj',
fun1: function () {
return function () {
console.log(tht 1 1 6 is.name)
}
},
fun2: fu@ 4 ~ - 6nction () {
return () => {
console.log(this.name)
}
}
}
}
var da1 = new Person('T . ; e 31')
var da2 = new Person('2')
da1.obj.fun1()(); // 达达前端， 匿名函数，this指向外层windy Z U b v 7 } ! eow，匿名函数指向w| $ # p | Q Qindow
da1.obj.fun1.call(da2)(); // 达达前端， 调用一般函数，绑定改动第一Q ) 1 M H &层函数this，再da2中的匿名函数仍是指向了外层window
da1.obj.fun1().call(da2); // 2 ,运转了fun1()一般函数，回来匿名函数，绑定了da2，改动了匿名函: A i数内的this，so，为2
da1.obj.fun2()(); //r 7 g 1 s obj，一般函数内的回来箭头函数，箭头函数界说时的this指向的时obj，so，回来箭头函数内O [ l $ l [的this.name为 obj
da1.obj.fun2.call(da2)(); // 2 fun2，为function(){...}，绑定，改动了第一层的thn d Y k % , . Fis，指向了da2，so，2
da1.obj.fun2().call(da2);R z 7 N 8 z | // obI u J ; e u E 4j 箭头函数无效，so，obj

function fu= G C a + 5n() {
console.log(this.a); // this.a 外层window，Z P Pda
};m + + 6 Z d
var a = 'G E i 2 }da';
(function| i X Q e Y l 8(){
// 这儿的this，指向window，this鄙人面的use strict严厉办法下，为undefined
    'use strict';
fun(); // 一般函数调用 // da
// this.fun();D f I 4  Y 这样的话就会报错u 5 C +
})();

this的指向

示例：

function dada() {
this.a = 'da'; // this指向wiH I ;ndow，window下 window.a = 'da'
console.log(this.a); // window.a
}
dada(); // da

函数dada中} I h . * 9 b的) u Z _ othis，在函数被调用时确认，指向函数当时运转的环境

示例：

var a = 'da';
function da() {
console.log(this.a);
};
var obj = {
a: 'da1',
fun: da
};
obj.fun(); // da1

目标办法调用，指向这个目标ob? e _ . 1j

call模仿完成

示例：

var obj = {
name: 'dada'
};
function fun() {
console.log(this.name); // window.name
};
fun.call(obj); // 绑定这个目标obj，dada

// 幻想一下改动
var obj = {
// 目标
name: 'dada', // 特点
fun: function() {
/H & c 6 1 b X ./ 一般函数
console.log(this.name); // obj.fun() - 目标obj调用fun() dada
}
}

obj.fun = 函数（赋值一个函数）// 将函数设为目标的特点
obj.fun()
del+ I D c a Gete obj.fun 这个特点
var obj = {
name: 'dada'
};
fe z [ 8 k r 9 +unction fun() {
console.log(this.name); // window.name
};
fun.call(obj);* U % u 0 b D H // 绑定这个目标obj，dada

看着上8 : g P面的写下面的办法：

Function.prototype.myCall = functionS 9 f(一个目标context) {
context.fun = thZ B ! ?is; // 这一步的tw e # V Bhis，指代dada()函数
context.fun();
delete context.fun;
}
var obj = {
name: 'dadas @ . x R b X [ ?'
};
function dada() {
console.log(this.name);
};
dada.myCall(obj); // 目标obj，绑定这个目标,this，context.fun = this

// 模仿传参问题call
var obj = {
value: 'dada'
};
function fun(name, age) { j % !
console.log(name)
console.log(age)
console1 S @.log(this.value);
}
fun.call(obj, 'da', 12);
// da
// 12
// dada

a~ T ) t X m 0 krguments是类3 k } 2 , & E数组目标

看看arguments
arguments = {
0: obj,
1: 'da',
2: 12,
length: 3
}

下面一步是为了取出参数：

call原办法，调用是分开的

JavaScript eval() 函数

界说和用法

eval() 函数核算 JavaScript 字符串，并把它作为脚本代码来履行。

假如参数是一个表达式，eval() 函数将J G D { d q履行表达式。假如参数是Javascript语句，eval()将l $ R v履行 Javascript 语句。

eval({ G C d strio ~ }ng)

Function.prots 8 &otype.myCall = function(context) {
context.fun = this;
var args = [];
for(var i = 1, len = arguments.length; i < len;! | B h A w H % i+ 3  ` | ; o u+) {
arZ ( z Q L 3 E l Vgs.push('arguments[' + i + ']');
}
eval('context.fun(' + args +')');
delete context.fun;
}

留意：参数能够为null

var name = 'dada';
function fun() {
console.log(this.name);
}
fun.call(nulB m : N W : 4l); // this指向window，dada

so改一下

Function.prototype.myCall = func: y z T (t2  U K S Y (ion (context) {
var context = context || window;
context.fun = this;
var5 O 9 args = [];
for(var i = 1, len = arguments.length; i < len;5 L 5 9  6 d a 5 i++) {
args.push('arguments[' + i + 'U 1 & u r h / 2 .]');
}
var reU $ m #sult = eval('conti 2 3 N s Next.fun(' + args +')');A ` W #
delete context.fun
return result;
}

apply模仿完成

示例：

传入一个目标，和数组
代码来自于@掘金冴羽
Function.prototype.apply = function (context, arra r 1 j = ` @ 6 s) {
vC _ ` Z & 6 - yar coA s 1 u  vntext = Object(context) || window;
context.fn = this;
var result: K  F Y y + q;
if (!arr) {
result = contt = % ; 1 p 7ext.fn();
}
else {
var args = [];
for (var i = 0, len = arr.length; i < len; i++) {
args.push('arr[' + i + ']');
}
result = eval('contexk J - = b g 2 ft.fn(' + args + ')')
}
delete context.fn
return result;
}

bind模仿完成

bind绑定函数，特点，回b , v m ^ ; I I来一个函数` m l & x l y，能够传参

示例：

var obj = {
name: 'da';
};
function fun() {
console.log(E (  V Othis.name)z ; Q l @ !;
}
// 回来一个函数
var dad _ p : * s1 = fun.bind(obj);
da1(); // da1 7 + m . 8 S o g

bind()办法创_ – l v ] 6 t w立一个新的函数，在b* u dind()被调用D + ( y时，新函数的this被指向bind()的第一个参数，绑定目标，其余参数. V q 8 –将是新函数的参数。

bindv s x x Y # A改动函数this的指向，但bind并不会立即履行函数，而l 3 ; 7 ! * +是回来一个绑定了this的新函数K n M $ i d ~。

模仿完成：

模仿完成第一步：

Function.prototype.myBind = function(con m l 8 F ltext){
var th{ A M J a ,at = this
return function(){
return that.a2 r $ /pply(context)
}
}
// 写法2
Function.prototype.bind_ = function (obj) {
var fn = this;
return function () {
fn.apply(obj);
}: k s X;
};

模仿完成第二步:支撑函数传参

Function.prototype.myBindG q X , K k = function (c[ y G u A % j Wontext) {
var that = this; // 函数
var arg9 o { es = Array.prototype.slice.c. ) i r h Gall(argume6 _ L E ! C 1 ?nts, 1);
return function () {
var bindArgs = Arras K Qy.prototype.slice.call(arguments);
return that.apply(context,a. - ~ T 5 *rx - u $ ! ;gs.concat(bindArgs));
}
}
// 写法2
Function.protg w : !otype.bind_ = funct/ 7 o 7  } 2 cion (obj) {
// 第0位是y ` ] K 1this，所以从第一位开端
var args = Array.prototype.slice.call(arguma U  Ients, 1);
var fn = this;
return function () {
fn.apply(obj, args);
};
};
Function.prototype.bind_ = function (obC 1 x z V i sj) {
var args = Array.prototype.slice.call(arguments, 1);
var fn = this;
return function () {
// 二次调用
var params = Array.prototype.slic5 B h 0 a f o ye.call(arguments);
fn.apply(obj, args.concat(params));
};
};

新增this判别以及原型承继

Function.prototype.bind_ = fun- ) ` T $ G Uction (obj) {
var args = Array.prototype.slice.call(arguments, 1);
var fn = this;
vJ h M j / 8 Lar instanceObj = function () {
var params = Array.pr/ = & P 5 Yototype.slice.call(arguments);
// 经过constructor判别调用办法
// 为true this指向实例，不然为obj
fn.apply(this.constructor === fn ? this : obj, args.concat(params));
};
//原型链承继
instanceObj.prototype = fn.protT f Z , 9 /otype;
return instanceObj;
};

模仿完成修正版：

Func; j  4 $ 7 J l ktion.) D 8 & 9 `prototype.bind = Function.prototype@  ^ Q ( y.bind || function (context) {
var me = this;
var args = Array.prototype.slice.call(arguments, 1);
vc } [ ! F . zar F = function () {};
F.A  , W fprototV c P x V - vype = this.prototype;
var| N J ; : bound = function () {
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return me.apply(tr  W 9 u p Ghis instanceof F ? this : context || this, finalArgs);
}
bound.prz ] 6 2 u H n d ototype = nj { # y j H | (eww f { } S F();
return bound;
}
// 修正
Function.prototype.myBind = function(obj) {
// 调用bind办法的一定要是一个函数
if(typeof this !== "functions p R ~ . & % s (")  {
throw new Error('error')& f x 0 X x z
};
var args = Array.prototype.slice.call(arguments, 1);
var fn = this;
var fn_ = function () {};
var instanceObj = function () {
var pq t ( { 2 3arams = Array.prototype.slice.call(arguments);
fn.apply(this.constructor === fn ? this : obj, args.concat(params));
console.log(this);
};
fn_.prototype = fn.prototype;
instanceObj.p# X , | e | C 6 =rototype = new fn_();
return instanceObj;
};

看到了这样的完成:(一起讨论，您能够经过写一篇文章来给我看哦)

bind: function bind(that) {
var target = this;
if (!isCallable(target)) {
throw new TypeErr` J =or('Function.prototype.bind callV 6 0 9 G w 8 V hed on incompatible ' + target);
}
var args = array_slice.cab ; f R U h , Zll(argumen` [ bts, 1);
var bound;
var binder = function () {
if (this instanceof bound) {
var result = target.apply(
this,
array_concat.call(args, array_slice.call(arm s oguments))
);
if ($Object(result) === result) {
return re! _ : n y = g Wsult;
}
return this;
} else {
returnz U _ r $ 8 target.apply(
that,
arr ( T b d F ^ay_concat.cald M | x W  9l(args, array_slice.call(arguments))
);
}
};
var b6 g YoundLength = max(0, target.length - args.length);
var boundArgs = [];
for (var i = 0; i < boundLea / U [ngth; i++) {
array_push.call(boundArgs, '$' + i);
}
bound = Function('binder', 'return function (' + boundArgs.join(',') + '` y 5 , p H . [){ retS - v = MurnE s - B R binder.apply(this, arguments); }')(binder);
if (target.protow a ~ # d mtype) {
Empty.prototype = target.prototype;
bound.prototype = nY & S 3 N 8 d a Wew Empty();
Empty.prototype = null;
}
return bound;
}

扩展

MDN上的文档：

bind()办法创立一个新的函数，当被调用时，将其this关键字设置为供& A t 6 g K /给的值，在调用新函数时，在任何供给之前供给要给给定的参数序列

apply()办法调用一个函数，其具有一个指定的tn ) % V : , 6his指，以及作为一个数组供给的参数

es6办法，示例：

Function.protype.myCall = function(context) {
var context = context || window;
context.fun = thR u K A j l V D Vis;
var args = [];
for(var i=1, len = argumentw n K m ds.length; i<len; i++) {
args.push(arguments[i]);
}
context.fun(...args)
delete context.fun
}

Function.prototype.myCall =g g  a D i E function(context,...args) {
context = context || winv A + zdow;
coE P R ? q W Entext.fun = this;
let temp = context.fun(...args);
delete context.fB ( @ H 8 j | 6 Aun;
return temp;
}

留意：永远不要运用 eval！

js中的new()

请你讲一下p 1 S S J + d &，在js中运用new操作符详细做了什么事情

1W & d p b 5 s = V、创立一个空的目标

2、链接到原型

3、绑定this指向，履行结构函数

4、保证回来的是目标

示例：

var obj =e V S = P f new da();
var obj = {};
obj.__proto__ = da.prototype;
da.c5 a v H R $all(obj);

function A(){}
var a = new A();
a.__proto__ === A.prototype //true
// 原型链
A.__s P w y Yproto__ === Functionc $ m =.prototype //true

弥补：prototype和__proto__

每一个函数都有一个pr r a nototype的特点，每一个由该函数实例化的目标都包括一个隐式指针（__proto_. 4 % . _ z ` R R_）指向该函数的prototype特点

new运算符

创立一个空的JavaScro b p * ~ { y eipt目标{}
链接该目标到另一个目标
将新创立的目标作为this的上下文
假如该函数没有x ? m s Z回来目标，则回来this

示例：

function da(name, age, year) {
this.name = name;
this.age = age;
this.year = year;
}
const da1 = new da('dada', '12', 2333);
console.log(da1.name);
// expected output: "dada"

function create(){
// 创立一个空目标  
let obj = new Object();
// 获取结构函数
let Constructor = [].shift.call(arguments);
// 链接到原型
obj.__proto] T L P D J T__ = Constructor.prototype;
// 绑定this
let result = Constructor.apply(obj,ai  E k c Trgu 2 , l # 4 L Bments);
// 回来新目标
return typeof result === "object" ? result : ob% v &j;
// let obj = newV j = 8 t Object();
}

Objec? P % H Vt.create 的模仿完成：

Object.create = functioH X j u ! 4 z / `n( o ) {
function f(){}
f.prototype = o;
return new f;
};

感谢提出的过错

不分次^ B _ E a序

掘金网友：自知无知

参考U 2 )文献

假如静下心来看的话是一定会有收成的！

不用call和apply办法模仿完成ES5的bin[ X +d办法

【主张q O y ~ # n @ T N】再来40道this面试题酸爽继^ N : 2 K :续(1.2w字用手收拾)

JavaScript深化之call和apply的模仿; r V g完成

JavaScript深化之bind的模仿完成

面试官问：能否模仿完成JS的bind办法

关于

作者：常混迹于前端江湖。
个人博客
github blog，求个star^_^~

微信大众号达达前端

或许比较风趣的微信大众号，长按扫码重视。也能够加微信 xiaoda0423，注明来历，拉您进【达达前端沟通群】。-注明来历

13期前端冲刺必备指南-this/call/apply/bind（万字长文）

前语

学习css布局

JavaScript变量

逻辑运算符

JavaScript数组

Vuex

JavaScC E f M h C ~ + erip5 i Lt中的this

call,apply,bind

箭头函数

this的指向

call模仿完成

apply模仿完成

bind模仿完成

扩展

js中的new()

感谢提出的过错

参考U 2 )文献

关于

微信大众号 达达前端

相关文章

🥳每日一练-B树的创建-JS不难版

gulp自动化构建项目

WKWebView 展示来自 JS 的警告信息

[‘1’, ‘2’, ‘3’].map(parseInt)输出什么

作者信息

微信大众号达达前端