- this我们一定不陌生但是它有四个指向你造吗
- 1.方法调用 指向方法
var age = 38;
var obj = {
age: 18,
getAge: function() {
console.log(this.age);
}
};
obj.getAge(); // 18
var fn = obj.getAge;
fn(); // 38
- 2.函数调用，里面的this指向的是window
var age = 38;
var obj = {
age: 18,
getAge: function() {
var fn = function() {
console.log(this.age);
};
fn(); // window 38
}
};
obj.getAge(); // 18
- 3.构造函数调用：this指向调用它的对象
var age = 38;
var obj = {
age: 18
};
var getAge = function() {
console.log(this.age);
};
obj.get = getAge;
obj.get(); // 18
- 4.上下文调用模式，this指向谁？指向的是传入的对象
call,apply :上下文调用模式
var arr = [1,3,4,6,7,555,333,13]
var max = arr[0]
for(let i=0;i<arr.length;i++){
if(max < arr[i]){
max = arr[i]
}
}
console.log(max)
console.log(Math.max(1,2,3,4,5))
console.log(Math.max.apply(arr,arr)) //=== Math.max(1,3,4,6,7,555,333,13)
console.log(Math.max.call(arr,1,3,4,6,7,555,333,13))
这里this是在clla、apply方法内部的,指向传入的对象arr
-5. 除了我们常见的数组arr之外还有一个伪数组你造吗
- 伪数组arguments,是一个对象: 访问方式：和数组一样，但不能使用数组的方法
var a = {
0: 'a',
1:'b',
2:'c',
length:3
}
function aa(){
console.log(arguments)
// 调出伪数组arguments
}
var ps = "name"
aa(ps)
function sum(){
console.log(arguments[2]);
// [].join()
console.log(Array.prototype.join.call(arguments,"-"))
// 给伪数组添加-
arguments.join("-")
}
sum("aa","bb","cc")
- 6.作用域和预处理
在运行前进行预处理，把var定义的变量，以及函数，都会先进行声明
es5以函数区分作用域
let const es6定义变量和常量,以{}区分作用域,严格区分写法、作用域 - DOM事件
<!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>DOM事件</title>
<style>
li{
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<script>
// ()() 还有个用途就是生成一个 命名空间, 可以 类似于自调用，前面的括号放我们的闭包函数
// 后面的括号相当于调用这个闭包函数里面也可以传参数
// 事件队列:在大量事件待执行的时候会把事件列一个队列等待调用
var dom = document.querySelectorAll('li');
for(let j=0;j<dom.length;j++){
dom[j].onclick=function(){
console.log(j+1)
}
}
// 添加事件的扩展
// DOM 事件 最常用的
var lis = document.querySelectorAll('li')
for(let i=0;i<lis.length;i++){
// 参数;事件类型 事件处理函数(回调) 监听器 冒泡或者捕获(布尔值)
lis[i].addEventListener('click',function(){
console.log(i);
},false)
}
// 和onclick的区别,onclick会覆盖，也就是说只能同一个节点有一个
// 而addEventListener不会覆盖
// 事件三要素：事件源 事件类型 (事件处理函数)执行函数
// 事件流程:冒泡(从内往外) 捕获(从外往内)
</script>
</body>
</html>
网友评论