一.this指向
<script>
// this指向
// 1.普通函数 this 非严格模式下指向 window, 严格模式下指向 undefined
// 2.构造函数 this 指向实例化对象, 原型对象的方法中的 this 指向实例化对象
// 3.对象方法中的 this 指向该方法所属对象
// 4.定时器中的 this 指向 window
// 5.立即执行函数中的 this 指向window
// 6.事件中的 this 指向事件源
</script>
二.call方法改变this指向
<script>
var obj = {
num: 10
}
// 普通函数
function fun(a, b) {
console.log(this); // window
console.log(a + b);
console.log(this.num + a + b);
}
// fun(1, 2);
// Function.prototype.call()
fun.call(obj, 1, 2); // 改变了 this 指向,此时指向对象 obj; call()方法会立即调用函数执行
</script>
三.apply方法改变this指向
<script>
var obj = {
num: 10
}
// 普通函数
function fun(a, b) {
console.log(this); // window
console.log(a + b);
console.log(this.num + a + b);
}
// Function.prototype.apply();
fun.apply(obj, [1, 2]); // 改变了this指向,此时指向对象 obj; 立即调用函数执行
// apply() 和 call() 的区别: call() 方法传递参数通过","隔开,而 apply() 方法传递参数通过数组的形式
// 共同点: 都能改变 this 指向, 都能立即调用函数执行
</script>
四.bind方法改变this指向
<script>
var obj = {
num: 10
}
// 普通函数
function fun(a, b) {
console.log(this); // window
console.log(a + b);
console.log(this.num + a + b);
}
// Function.prototype.bind()
fun.bind(obj, 1, 2)(); // 改变了 this 指向,此时指向对象 obj; bind()方法不会立即调用函数, 需要在改变this指向之后再次调用
// call() apply() bind()
// 相同点: 都能改变 this 指向
// 不同点: call() 和 apply() 会立即调用函数执行;
// call() 和 bind() 传递参数通过 "," 隔开; apply() 传递参数通过数组形式
</script>
五.call方法使用场景
<script>
// 判断数据类型 typeof instanceof
// 最精准的判断
// Object.prototype.toString.call()
var obj = {
name: "zhangsan"
}
var arr = [];
var date = new Date();
console.log(Object.prototype.toString.call(10)); // [object Number]
console.log(Object.prototype.toString.call("abc")); // [object String]
console.log(Object.prototype.toString.call(obj)); // [object Object]
console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(Object.prototype.toString.call(date)); // [object Date]
</script>
六.apply方法使用场景
<script>
// Math.max
console.log(Math.max(1, 2, 3, 4, 5, 6, 7, 8, 9));
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 使用 apply() 方法, 求数组中的最大值
console.log(Math.max.apply(Math, arr));
</script>
七.bind方法使用场景
<body>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<button>点击</button>
<script>
var btn = document.querySelectorAll("button");
// 点击一次过后, 5s后才能点击第二次
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function () {
var timeOut = 5;
this.disabled = true;
this.innerHTML = "请" + timeOut + "秒后点击";
this.timeId = setInterval(function () {
if (timeOut > 1) {
timeOut--;
this.innerHTML = "请" + timeOut + "秒后点击";
} else {
this.removeAttribute("disabled");
this.innerHTML = "点击";
clearInterval(this.timeId);
}
}.bind(this), 1000)
}
}
</script>
</body>
</html>
八.constructor构造函数判断数据类型
<script>
var num = 10;
console.log(num.constructor); // Number(){}
console.log(num.constructor == Number);
// var empty = null;
// console.log(empty.constructor);
// 判断数据类型的方法
// 1.typeof
// 2.instanceof
// 3.Object.prototype.toString.call()
// 4.constructor
</script>
九.forEach
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// 通过 forEach() 遍历数组, 没有返回值
// for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
arr.forEach(function (value, index, arr) {
// console.log(value);
// console.log(index);
console.log(arr);
})
</script>
十.map
<script>
var arr = [10, 11, 12, 13, 14, 15, 16, 17];
// 通过 map() 方法遍历数组, 有返回值
var rel = arr.map(function (value, index, arr) {
// console.log(value);
// console.log(index);
// console.log(arr);
return value + 10;
})
console.log(rel);
</script>
十一.fillter
<script>
var arr = [10, 11, 12, 13, 14, 15, 16, 17];
// filter() 过滤数组
var rel = arr.filter(function (value, index, arr) {
console.log("cont"); // 8次
return value >= 15;
})
console.log(rel);
</script>
十二.some
<script>
var arr = [10, 11, 12, 13, 14, 15, 16, 17];
// some() 查找数组中是否有符合条件的元素
var rel = arr.some(function (value) {
console.log("cont");
return value < 10;
})
console.log(rel);
</script>
十三.every
<script>
var arr = [10, 11, 12, 13, 14, 15, 16, 17];
// every() 判断数组中元素是否都符合条件
var rel = arr.every(function (value) {
console.log("cont");
return value > 15;
})
console.log(rel);
</script>
十四.find
<script>
var arr = [10, 11, 12, 13, 14, 15, 16, 17];
// find() 返回满足条件的第一个值
var rel = arr.find(function (value) {
console.log("cont");
return value > 15;
})
console.log(rel);
</script>
十五.reduce
<script>
var arr = [10, 11, 12, 13, 14, 15, 16, 17];
// array.reduce(function(total,value,index,array){},initialValue)
// total 必需。初始值, 或者计算结束后的返回值。
// value 必须。当前元素
// index 可选。当前元素的索引
// array可选。当前元素所属的数组对象。
// initialValue 作为第一次调用 `callback`函数时的第一个参数的值。 如果没有提供初始值,则将使用数组中的第一个元素。
// 数组求和
var rel = arr.reduce(function (total, value) {
// console.log(total);
return total + value;
}, 0)
console.log(rel);
// 数组去重
var arr2 = [10, 29, 42, 2, 3, 3, 5, 6, 6, 9, 10];
var newArr = arr2.reduce(function (total, value) {
if (total.includes(value)) {
return total;
} else {
total.push(value);
return total;
}
}, []);
console.log(newArr);
</script>
十六.构造函数继承
<script>
// 构造函数继承
// 父构造函数
function Father(name) {
// this 指父构造函数实例化的对象
this.name = name;
}
// 子构造函数
function Son(name, age, height) {
// this 指子构造函数实例化的对象
// this.name = name;
this.age = age;
this.height = height;
// 子构造函数中继承父构造函数的属性
// 这里的 this 仍然是子构造函数实例化的对象
Father.call(this, name);
}
var son = new Son("小好", 18, 180);
console.log(son);
</script>
十七.原型对象方法的继承
<script>
// 父构造函数
function Father(name) {
// this 指父构造函数实例化的对象
this.name = name;
}
Father.prototype.sayHi = function () {
console.log("hello");
}
// 子构造函数
function Son(name, age, height) {
// this 指子构造函数实例化的对象
// this.name = name;
this.age = age;
this.height = height;
// 子构造函数中继承父构造函数的属性
// 这里的 this 仍然是子构造函数实例化的对象
Father.call(this, name);
}
// 子构造函数原型对象上的方法 = 父构造函数原型对象上的方法
// 不行
// Son.prototype = Father.prototype;
Son.prototype = new Father();
Son.prototype.constructor = Son;
var son = new Son("小好", 18, 180);
console.log(son);
son.sayHi();
</script>
十八.Object.create继承
<script>
var father = {
name: "小好"
}
var son = Object.create(father, {
age: {
// 是否可枚举
enumerable: true,
// 是否可修改
writable: true,
// 是否可配置
configurable: true,
// 值
value: 18
},
gender: {
// 是否可枚举
enumerable: false,
// 是否可修改
writable: false,
// 是否可配置
configurable: false,
// 值
value: "男"
}
});
console.log(son);
</script>