案列还没有修改,就这样吧!那天有时间那天修改
this指向
1.全局和独立调用指向window
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var x=this;
console.log(this);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function c(a,b){
a+b;
//return返回函数内部的值
return this;
}
console.log(c(2,4));
</script>
</body>
</html>
2.严格模式下,this指向undefined,不会造成全局污染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
"use strict"
function c(a,b){
a+b;
return this;
}
console.log(c(2,4));
</script>
</body>
</html>
3.构造函数中,this指向构造出来的实例
this指向构造出来的实例,严谨的说,是构造出来的实例引用了构造出来的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function Student(name,age){
console.log(this);
this.name=name;
this.age=age;
this.intr=function(){
return `I’m ${this.name},I'm ${this.age}`
}
}
var kevin=new Student("kevin",18);
</script>
</body>
</html>
4.箭头函数
箭头函数this指向执行的上下文,一般都是父级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var kevin = {
name:"kevin",
age:[18,22,26],
intr:function(){
this.age.forEach(sname=>console.log(`${this.name}今年${sname}岁了`))
console.log(this);
}
}
kevin.intr()
</script>
</body>
</html>
5.函数谁调用指向谁
这种情况很复杂,应该包括了下面的6,7,也就是下面的6.7不用看了,等我那天有空再来修改
继承prototype
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// this->将来哪个子对象调用这个共有方法,this就指向前面的那个子对象。谁调用指谁。
function Student(name,age){
console.log(this);
this.name=name;
this.age=age;
}
Student.prototype.intr=function(){
console.log(this);
return `I’m ${this.name},I'm ${this.age}`
}
var kevin=new Student("kevin",18);
kevin.intr();
</script>
</body>
</html>
访问器属性中的this指向访问器属性所在的对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 要求,kevin的年龄只能在18到65岁之间
var kevin = {
name : "kevin",
age:18
}
Object.defineProperty(kevin,"_age",{
value:kevin.age,
writable:true,
enumerable:false,
configurable:false,
})
Object.defineProperty(kevin,"age",{
get:function(){
console.log(this);
return this._age;
},
set:function(value){
if(value >= 18 && value <= 65){
this._age=value;
}else{
throw Error("年龄超出范围,没有权限修改");
}
},
enumerable:true,
configurable:false
})
// 修改
kevin.age=66;
console.log(kevin);
</script>
</body>
</html>
改变this指向
call/apply/bind可以改变this指向,但不能改变箭头函数的this指向
1.箭头函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 普通this指向,值undefined
var kevin = {
name:"kevin",
age:[18,22,26],
intr:function(){
this.age.forEach(function(sname){
console.log(`${this.sname} 今年${this.age}岁了`)
})
}
}
kevin.intr()
// 箭头函数this改变,值正确
var kevin = {
name:"kevin",
age:[18,22,26],
intr:function(){
this.age.forEach(sname=>console.log(`${this.name}今年${sname}岁了`))
console.log(this);
}
}
kevin.intr()
</script>
</body>
</html>
2.call
临时替换一次this为指定对象
函数名.call()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function sum(salary1,salary2,salary3){
console.log(`三月总工资为${salary1+salary2+salary3}`)
}
var kevin={name:"kevin"}
// call方法添加函数
sum.call(kevin,13000,8000,9000)
</script>
</body>
</html>
3.apply
临时替换一次this,并打散数组apply
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function sum(salary1,salary2,salary3){
console.log(`三月总工资为${salary1+salary2+salary3}`)
}
var kevin={name:"kevin"}
var arr=[10000,3000,19000];
// apply方法给函数添加函数和传参
sum.apply(kevin,arr)
</script>
</body>
</html>
4.bind
bind固定一个参数值为基础,然后可以传新的参数
var 新函数名=旧函数名.bind(替换this的对象,固定参数)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function sum(salary1,salary2,salary3){
console.log(`三月总工资为${salary1+salary2+salary3}`)
}
var kevin={name:"kevin"}
// 形参基础值20000
var sum2=sum.bind(kevin,20000);
sum2(10000,3000);
sum2(800,100);
</script>
</body>
</html>
我在看一种很新的东西,改变类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function foo(a,b,c,d,e){
console.log(this);
}
var obj = {
a:2,
foo:foo
}
var bar = obj.foo;
obj.foo(1,2,3,4,5);
// 变为数组
// bar.call(1,2,3,4,5);
// 变为bool
// bar.call(false,2,3,4,5);
// undefined->值为window诶,没有包装类,就是默认的绑定
// bar.call(undefined,2,3,4,5);
// null->值为window,理由同上
bar.apply(null,[1,2,3,4,5])
</script>
</body>
</html>
通用 globalThis
this题目合集
有专门的一篇,这个下面的内容等我以后再看值不值得留
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
//1
var a=123;
function num(){
var a=10;
console.log(this.a);//123
console.log(this);//window
}
num();
//2.
var name="kevin";
var person={
name:"kevin",
fn(){
console.log(this);
}
}
person.fn();//{name: "kevin", fn: ƒ}
//3.
var name="Jason";
var person1={
name:"Jason",
fn(){
console.log(this);//{name: "Jason", fn: ƒ, fn1: ƒ}
},
fn1:()=>{
console.log(this.name)//Jason
}
}
person1.fn();
person1.fn1();
//4.
</script>
</body>
</html>