函数this指向
1:环境对象 this : 谁'调用'我,我就指向谁,上下文环境:函数作用域
2: js中函数有三种调用方法,this三种指向
(1)普通函数; 函数名() this指向window
(2)构造函数; new 函数名() this指向new创建实例对象
(3)对象方法: 对象名.方法名() this指向对象
* 小技巧: 没点没new是window, 有new是实例,有点是点左边的对象
函数上下文调用
默认情况下,函数内部的this不能主动修改. 如果需要修改,则需要使用上下文方式
上下文调用 : 修改函数内部的this
1 函数名.call ({修改后的this指向},形参1,形参2…………)
function fn(a,b){
console.log( a + b )
console.log( this )
}
fn.call({name:'张三'},10,20)
2 函数名.apply({修改后的this指向},[数组或者伪数组])
apply会自动帮你遍历数组,然后按照顺序逐一传参
function fn(a,b){
console.log( a + b )
console.log( this )
}
fn.apply({name:'千玺'},[30,40])
3 函数名.bind(修改后的this)
* 不会立即执行函数,而是得到一个修改this之后的新函数。
* bind一般用于修改: 定时器函数、事件处理函数
function fn(a,b){
console.log( a + b )
console.log( this )
}
let newFn = fn.bind({name:'王五'})
newFn(100,200)
newFn(10,20)
面试必问: call 和 apply 和 bind三者区别:(重点)
相同点 :
作用一致,修改函数this指向
不同点 :
传参方式不同 : call是按照顺序传参, apply是数组/伪数组传参
执行机制不同 : call和apply会立即执行函数,而bind不会立即执行而是得到修改this的新函数
例子:
call使用场景万能数据类型检测:
1. typeof 数据 : 有两种数据类型无法检测
null和数组无法检测,结果都是 'object'
2. 解决方案:万能数据类型检测
Object.prototype.toString.call(数据)
例子:
//值类型
let str = 'abc'
let num = 123
let bol = true
let und = undefined
let nul = null
//引用类型
let arr = [10,20,30]
let fn = function(){}
let obj = {name:'张三'}
console.log( typeof str )//'string'字符串型
console.log( typeof num )//'number'数字类型
console.log( typeof bol )//'boolean'布尔型
console.log( typeof und )//'undefined'未定义型
console.log( typeof nul )//'object' 对象 正确的是空
console.log( typeof arr )//'object' 对象 正确的是数组
console.log( typeof fn )//'function' 函数
console.log( typeof obj )//'object' 对象
/* Object.prototype.toString() 返回固定格式字符串 '[object 数据类型]' */
console.log( Object.prototype.toString.call( str ) )//[object String] 字符串型
console.log( Object.prototype.toString.call( num ) )//[object Number] 数字类型
console.log( Object.prototype.toString.call( bol ) )//[object Boolean] 布尔型
console.log( Object.prototype.toString.call( und ) )//[object Undefined] 未定义型
console.log( Object.prototype.toString.call( nul ) )//[object Null] 空
console.log( Object.prototype.toString.call( arr ) )//[object Array] 数组
console.log( Object.prototype.toString.call( fn ) )//[object Function] 函数
console.log( Object.prototype.toString.call( obj ) )//[object Object] 对象
3.面试点:
(1)请说下列代码的运行结果:typeof [ ]
(2)是否能得到array 如果不能如何解决
伪数组转数组:
ES6方法:伪数组转真数组 : Array.from( 伪数组 )
//伪数组 本质是 : 对象
let obj = {
0:20,
1:66,
2:88,
3:90,
length:4
}
// ES5方法
//伪数组转真数组
let arr = []
// arr.push( obj[0],obj[1],obj[2],obj[3])
//借助 apply自动遍历数组/伪数组 逐一传参特点
//这里不需要修改this,只是借助apply传参的特点. this指向原来是谁,还是设置谁
arr.push.apply( arr,obj )
console.log(arr)
// ES6方法
//伪数组转真数组 : Array.from( 伪数组 )
console.log( Array.from(obj) )
求最大值最小值:
Math.max (...arr) (最大) , Math.min(...arr)(最小)
const arr = [20,30,40,50,80]
// 1. Math.max.apply(Math,arr)
console.log(Math.max.apply(Math,arr))
console.log(Math.min.apply(Math,arr))
// 2.Es6
// ...展开运算符,相当于自动遍历数组每一个元素 在这里类似于apply功能
const max1 = Math.max(...arr)
console.log(max1)
const max2 = Math.min(...arr)
console.log(max2)
修改定时器的this
定时器中的this : 默认指向window
想要修改定时器函数中的this需要用到bind()
setTimeout(function() {
console.log(this)
}.bind({ name: "1111" }),2000)
// let obj = {
// name: "张三",
// hobby: ["学习", "干饭", "睡觉"],
// sayHi: function() {
// setTimeout(function() {
// console.log(this)
// }, 1000)
// }
// }
// obj.sayHi()
闭包
1.闭包closure是 :
a. 闭包 是一个 访问其他函数内部变量 的 函数
b. 闭包组合 = 函数 + 上下文引用
2.闭包作用 : 解决变量污染
3.在浏览器中调试闭包
闭包案例
<input type="text" placeholder="请输入搜索内容">
<button class="btn">点我搜索</button>
<script>
// 获取收搜索点击按钮
document.querySelector('button').addEventListener('click',function(){
// 获取输入框文本
const taxt = document.querySelector('input').value
// 网络请求不是立即就能得到数据的 而是像定时器一样
// 定时器模拟网络请求
setTimeout(function(){
alert(`${taxt}搜索结果是12345`)
},1000)
})
</script>
递归
1.递归函数: 一个函数 在内部 调用自己
* 递归作用和循环类似的,也需要有结束条件
2.递归应用:
(1)浅拷贝与深拷贝:
方式一(推荐) : JSON方式实现
* let newObj = JSON.parse( JSON.stringify( obj ) )
const obj = {
name: '千玺',
age: 19,
hobby: ['学习', '上课', '代码']
}
//浅拷贝: 拷贝地址
// let newObj = obj
// 修改拷贝后的数据,原数据也会修改
// newObj.name = '李四'
// console.log( obj,newObj)
// 深拷贝:拷贝的是数据 修改修改后的数据 对原数据没影响
//(1)先把js对象 -> JSON字符串 (JSON会自动帮你深拷贝)
// const obj1= JSON.stringify(obj)
//(2)再把 JSON字符串 -> js对象
// const newObj = JSON.parse(obj1)
// 上面的步骤写成一个
const newObj = JSON.parse(JSON.stringify(obj))
newObj.name = '王源'
console.log(obj, newObj)
方式二(递归) : 了解
(2)遍历dom树
3.面试题:浅拷贝深拷贝
浅拷贝:拷贝的是地址,修改拷贝的数据后,对原数据有影响
深拷贝:拷贝的是数据,修改修改后的数据,对原数据没有影响