<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>arrow-function箭头函数不适用场景</title>
</head>
<body>
<script>
/*
作为构造函数,一个方法需要绑定到对象
*/
// const Person = (name, points) => {
// this.name = name; //this.name并没有绑定到xyz这个对象上
// this.points = points; //this.points并没有绑定到xyz这个对象上
// }
// const xyz = new Person('xyz', 7); //报错:Uncaught TypeError: Person is not a constructor...
// /*
// 箭头函数是不存在this值的绑定的;
// 所以this.name并没有绑定到xyz这个对象上;
// */
// Person.prototype.updatePoints = () => {
// this.points++;
// console.log(this.points);
// }
const Person1 = function (name, points) {
this.name = name;
this.points = points;
}
const xyz1 = new Person1('xyz', 7);
console.log(xyz1);
Person1.prototype.updatePoints = () => {
console.log(this); //window 注意这里也是使用的箭头函数,所以this指向的是父级作用域
this.points++;
console.log(this.points); //NaN
}
console.log(xyz1.updatePoints()); //undefined
const Person2 = function (name, points) {
this.name = name;
this.points = points;
}
const xyz2 = new Person2('xyz', 7);
Person2.prototype.updatePoints = function () {
this.points++;
console.log(this.points); //8
}
/*
需要使用arguments对象
*/
</script>
</body>
</html>
箭头函数不适用场景
猜你喜欢
转载自blog.csdn.net/JEFF_luyiduan/article/details/91467718
今日推荐
周排行