BOM

浏览器对象模型
window.addEventListener('load', function() {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            alert('点击我');
        })
    })
// load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等        
window.addEventListener('resize', function () {
            console.log(window.innerWidth);
            console.log('变化了');
            if (window.innerWidth <= 800) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
//当前屏幕的宽度

// 1. setTimeout 
    // 语法规范：  window.setTimeout(调用函数, 延时时间);
    // 1. 这个window在调用的时候可以省略
    // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
    // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
    // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
    // setTimeout(function() {
    //     console.log('时间到了');

    // }, 2000);//2000ms
    
    clearTimeout(timeoutID);//停止setTimeout()定时器
    
    // 1. setInterval 
    // 语法规范：  window.setInterval(调用函数, 延时时间);
    setInterval(function() {
        console.log('继续输出');

    }, 1000);
    // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
    // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    
 clearInterval(intervalID);//停止setInterval()定时器
 var begin = document.querySelector('.begin');
    var stop = document.querySelector('.stop');
    var timer = null; // 全局变量  null是一个空对象 //!!!!
    begin.addEventListener('click', function() {
        timer = setInterval(function() {
            console.log('ni hao ma');

        }, 1000);
    })
    stop.addEventListener('click', function() {
        clearInterval(timer);
    })

this指向问题

 // this 指向问题 一般情况下this的最终指向的是那个调用它的对象

    // 1. 全局作用域或者普通函数中this指向全局对象window（ 注意定时器里面的this指向window）
    console.log(this);

    function fn() {
        console.log(this);

    }
    window.fn();
    window.setTimeout(function() {
        console.log(this);

    }, 1000);
    // 2. 方法调用中谁调用this指向谁
    var o = {
        sayHi: function() {
            console.log(this); // this指向的是 o 这个对象

        }
    }
    o.sayHi();
    var btn = document.querySelector('button');
    // btn.onclick = function() {
    //     console.log(this); // this指向的是btn这个按钮对象

    // }
    btn.addEventListener('click', function() {
            console.log(this); // this指向的是btn这个按钮对象

        })
        // 3. 构造函数中this指向构造函数的实例
    function Fun() {
        console.log(this); // this 指向的是fun 实例对象

    }
    var fun = new Fun();

期末复习事有点多每天的学习时间不是太长暑假再补过来吧

学习JS第七天

BOM

this指向问题