this指向-作用域-DOM事件

2019-04-24 本文已影响0人樊小勇

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>

this指向-作用域-DOM事件

猜你喜欢

热点阅读