html,body{ height: 100%; overflow: hidden; background: -webkit-linear-gradient(top left,lightblue,lightpink); } </style> </head> <body> <script> /** * this的几种情况 * + 事件绑定 * + 函数执行 * + 自执行函数 * + 回调函数 * + ... * + 构造函数执行 * + 基于call / apply / bind 改变函数中的this * + 箭头函数中没有自己的this,所用到的this是使用上下文中的 * */ // Function.prototype -> call / apply / bind 所有的函数都可以调取这三个方法
// window.name = "WINDOW"; // let obj = { // name:"Eric", // age:29 // }
// function fn(x,y){ // console.log(this.name,x+y); // }
// fn() // this -> window "WINDOW"
// obj.fn(); // obj.fn is not a function
// this->obj Eric // fn.call(obj) // (fn先基于__proto__找到Function.prototype.call, // 把call方法执行的时候,call方法内部实现了一些功能，会把fn执行， // 并且让fn中的this变为第一个实参值)
// fn.call(obj,10,20) // this->obj x->10 y = 20 Eric 30 // fn.call() // this -> window 严格模式下是 undefined // fn.call(null) // this -> window 严格模式下是 null // ============================ // apply 的作用和细节上 和call 一样， 只有一个区别，传递给函数实参的方式不一样 // fn.apply(obj,[ 10,20 ]) // 最后结果和 call 是一样的，只不过apply方法执行的时候要求：传递给函数的实参信息 // 都要放置在一个数组汇中，但是apply内部也会向call方法一样，把这些实参信息一项项的传递给函数
// 需求1 获取数组中的最大值 // let arr = [10,30,15,36,23]; // 0 // let max = Math.max(...arr) // console.log(max);
// 1 // arr.sort((a,b)=>{ // return b - a // }) // let max = arr[0] // console.log(max);
// 2 // var max = arr[0] // for(var i=0;i<arr.length;i++){ // if(max < arr[i]){ // max = arr[i] // } // } // console.log(max);
// 3 // let max = arr.reduce((result,item)=>{ // return item > result ? item : result // }) // console.log(max);
// ================================ // function sum(){ // /** // * arguments: 实参集合， 它是一个类数组，不是Array的实例，所以不能调用Array.prototype // * 上的方法，但是结构和数组非常的相似， 都是 索引 + length // * // * */ // // console.log(arguments);
// // let arr = Array.from(arguments) // 1 // // let arr = [...arguments] // 2
// // let arr = [] // // for(let i=0;i<arguments.length;i++){ // // arr.push(arguments[i]) // // }
// let arr = [].slice.call(arguments) // return arr.reduce((result,item)=>{ // return result + item // }) // } // let total = sum(10,20,30,40,10) // console.log(total);
// ======================================== // window.name = "WINDOW"; // let obj = { // name:"Eric", // age:29 // }
// function fn(x,y){ // console.log(this,x,y); // } /** * this -> body * x = Event * y undefined */ // document.body.onclick = fn;
/** * this->window * x -> undefined * y -> undefined */ // setTimeout(fn,1000)
/** * call/apply 在处理的时候，会立即执行 * */ // document.body.onclick = fn.call(obj,10,20) // setTimeout(fn.call(obj,10,20),1000) // 预先处理思想 // document.body.onclick = function(ev){ // fn.call(obj,10,20) // }
// setTimeout(function(){ // fn.call(obj,10,20) // },1000)
// bind 不会立即执行，只是处理了 this 和参数 // document.body.onclick = fn.bind(obj,10,20) // setTimeout(fn.bind(obj,10,20),1000)
// ======================= // 箭头函数没有自己的this let obj = { name:"Eric", age:29, fn:function(){ return function(){ console.log(this); } } } let f = obj.fn(); f() // this -> window
</script> </body> </html>