一, 补充
1. this的指向
全局函数的指向 window
<script>
/*
一般来说 this的指向 判断依据 谁调用了 函数 this 指向谁
其实 当我们定义了全局的函数的时候，默认是挂载到了window 全局变量上
全局函数 其实就是 window的一个属性而已 只不过 平时写代码的时候 可以省略这个window
小结
1 当我们定义全局的函数的时候 本质是给window添加了一个 属性（函数类型）
2 当我们调用这个函数 的时候 abc() 本质 window.abc() -- window 可以被省略而已
*/
function abc() {
console.log("ABC");
console.log(this);
}
// window.abc = function () {
// console.log('ABC');
// console.log(this);
// };
// window.abc();
abc();
const obj ={
username:"悟空",
say(){
console.log(this);
}
}
// say();
</script>
箭头函数的指向 没有 this
<body>
<button>点击</button>
<script>
/*
1 箭头函数没有内部的this
2 当你的函数执行体代码中 有出现了 this 慎用 箭头函数！！ - 遵循！！
*/
// const obj = {
// username:"悟空",
// say:()=>console.log(this)
// }
// const func = () => console.log(this);
const button=document.querySelector("button");
button.addEventListener("click", ()=> {
// this.innerText="被修改哈"
console.log(this);
})
</script>
</body>
修改箭头函数的执行 bind、call、apply
<script>
/*
1 bind 、call 、 apply 修改 this的指向
1 call 和 apply 会在调用原函数的同时也修改this的指向
2 bind会帮你修改this指向 但是 不会直接调用原函数 而是会返回一个 修改了this指向 的新函数
3 call 和 apply 区别 传递参数的方式不同而已
obj.say.call(newObj,1,2)
obj.say.apply(newObj,[1,2])
2 默认情况下 this的指向 - 谁调用了我 this 指向谁
*/
const obj = {
username: '悟空',
// say() {
// console.log(this.username, 'obj中的say方法 ');
// },
say(a, b) {
console.log(a, b);
},
};
const newObj = {
username: '八戒',
};
// obj.say.call(newObj);// 八戒 obj中的say方法
// obj.say.apply(newObj);// 八戒 obj中的say方法
// const fn = obj.say.bind(newObj); // 返回一个新的函数 新函数内部 修改this指向的功能
// obj.say.call(newObj,1,2) ;
// obj.say.apply(newObj,[1,2]) ; // 参数必须要以数组的形式来传递
const fn = obj.say.bind(newObj);
fn(1, 2);
</script>
2. 检测数据类型
-
检测简单 基本的数据类型 使用 typeof
// 使用方法 typeof "" 检测 复杂 引用 的数据类型 intanceof
// 使用方法
p1 intanceof Person
-
案例
<script> // 基本的数据类型 typeof // 引用数据类 intanceof // 检测 你是不是 你爸爸亲生！！ 检测 这个实例是不是被某个构造函数 new 出来 // console.log(typeof ''); // console.log(typeof 1); class Person {} class SuperPerson{} const p1 = new Person(); const s1 = new SuperPerson(); console.log(p1 instanceof Person);// true console.log(p1 instanceof SuperPerson); // false </script>
3. 原型链
<script>
function Person() {}
Person.prototype.add = function () {};
Person.prototype.remove = function () {};
Person.prototype.clear = function () {};
function YellowPerson() {}
// YellowPerson.prototype.add= Person.prototype.add;
// YellowPerson.prototype.remove= Person.prototype.remove;
// YellowPerson.prototype.clear= Person.prototype.clear;
// 让儿子的原型 指向 父亲的原型
// newObj = obj ;
// YellowPerson.prototype = Person.prototype;
// 对象复制
YellowPerson.prototype = { ...Person.prototype };
YellowPerson.prototype.cunstructor = YellowPerson;
const yp = new YellowPerson();
console.log(yp);
// YellowPerson.prototype.aabbcc = function () {};
// const p1 = new Person();
// console.log(p1);
</script>
