今天在抽代码封装到原型对象中时发现了this指向不是我想要的结果，刚开始都不知道该怎么百度，在放弃时发现，原来this指向还能改！于是有了后面的例子。（代码中最后三行 JS）
<!doctype html>
<html lang="ZH">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
//语法 fn.call(obj,n,n,...,n); <br>
//语法 fn.apply(obj,[n,n,...,n]);<br>
//语法 fn.bind(obj,n,n,...,n)(); 最后的()不加,方法不会被调用 <br>
<br>
<input type="button" value="原来" onclick="input0('我是','input0')">
<input type="button" value="方式1" onclick="input1.call(this, '我是','input1')"/> <!--第一个参数是需要将指针指向的位置,后面的参数是需要传到方法中的参数,逗号分隔追加-->
<input type="button" value="方式2" onclick="input2.apply(this, ['我是','input2'])"/> <!--第一个参数是需要将指针指向的位置, 第二个参数是需要传到方法中的参数,所有参数都需要放到[]中,用逗号分隔-->
<input type="button" value="方式3" onclick="input3.bind(this, '我是','input2')()"/> <!-- 最后一对()不加方法不会调用 第一个参数是需要将指针指向的位置,后面的参数是需要传到方法中的参数,逗号分隔追加-->
<script>
function input0(a, b){
console.log(this);
alert(a + ":" + b + " value为:" + this.value);
}
function input1(a, b){
console.log(this);
alert(a + ":" + b + " value为:" + this.value);
}
function input2(a, b){
console.log(this);
alert(a + ":" + b + " value为:" + this.value);
}
function input3(a, b){
console.log(this);
alert(a + ":" + b + " value为:" + this.value);
}
//========================其他例子分割线========================
var a = "a";
let s = "s";
var data = {
a: 1,
b: 2,
c: 'c'
}
//指向位置时第一个参数不一定非要用this,还可以指向别处
// test1 中只示范 this 的指向，不解释原理。【【此方法并未更改 this 指向】】
function test1() {
let a = 0;
console.log("a = " + a); //打印 a = 0
console.log("this.a = " + this.a); //打印 this.a = a |因为当前的this指向为 Window 对象
console.log("s = " + s); //打印 s = s
console.log("this.s = " + this.s); //打印 this.s = undefined |因为当前this指向为 Window 对象, let 全局变量不在 Window中,所以找不到 s 这个变量
//参考 https://blog.csdn.net/qq_41257129/article/details/100072301
}
test1();
console.log("================================================================")
//调用此方法时更改this指向对象
function test2(str){
console.log("=================== " + str + " ===================");
console.log("a = " + a); //打印 a = 0 |没用 this 时，切函数内未定义 a 这个变量。则打印的是全局中的 a 变量值
console.log("this.a = " + this.a); //打印 this.a = 1 |我们在调用test2时将this指向更改到了 data 对象中,所以 a = 1
console.log("this.b = " + this.b); //打印 this.b = 2 |我们在调用test2时将this指向更改到了 data 对象中,所以 b = 2
console.log("this.c = " + this.c); //打印 this.c = c |我们在调用test2时将this指向更改到了 data 对象中,所以 c = c
}
test2.call(data, "调用方式 test2.call(data,n,n,..,n)"); //语法 fn.call(obj,n,n,...,n);
test2.apply(data,['调用方式 test2.apply(data,[n,n,..,n])']); //语法 fn.apply(obj,[n,n,...,n]);
test2.bind(data, "调用方式 test2.bind(data,n,n,..,n)()")(); //语法 fn.bind(obj,n,n,...,n)(); 最后的()不加,方法不会被调用
</script>
</body>
</html>
网友评论