windows对象

浏览器对象模型（BOM）的核心对象是window，表示的是一个浏览器的实例。window对象即是访问浏览器的一个接口，也是规定的一个全局对象。在全局作用域中声明的任何一个变量，函数都会成为window对象的属性和方法。

document对象

document对象---- 代表整个HTML文档，可以用来访问页面中的所有元素 。
每一个载入浏览器的HTML文档都会成为document对象。document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。 document对象是window对象的一部分， 可以通过window.document属性对其进行访问

Demo1

console.log(this)
function fn1(){
  console.log(this)
}
fn1()

image.png

Demo2

function fn0() {
        function fn() {
            console.log(this)
        }
        fn()
    }
fn0()

image.png

document.addEventListener(event,funciton,useCapture)

useCapture

可选。布尔值，指定事件是否 在捕获或冒泡阶段执行。
可能值：
true - 事件句柄在捕获阶段执行
false- 默认。事件句柄在冒泡阶段执行

Demo3

document.addEventListener('click',funciton(){
  console.log(this);
  setTimeout(function(){
      console.log(this);
},200);
},false}

第一个console.log(this)输出的是#document对象
第二个console.log(this)输出的是window的直接对象
当出现点击事件的时候，控制台将会出现

image.png

Demo4

function Person(name){
    this.name = name;
}
Person.prototype.printName = function(){
    console.log(this.name);
};

var p1 = new Person('Byron');
var p2 = new Person('Casper');
var p3 = new Person('Vincent');

p1.printName();
p2.printName();
p3.printName();

image.png

给person对象添加一个printName的值，使得每一个person对象的值都拥有printName这个方法

作为对象方法调用

在 JavaScript 中，函数也是对象，因此函数可以作为一个对象的属性，此时该函数被称为该对象的方法，在使用这种调用方式时，this 被自然绑定到该对象

var obj1 = {
        name: 'Byron',
        fn: function () {
            console.log(this);
        }
    };

    obj1.fn();

image.png

小陷阱

var fn2 = obj1.fn；
fn2()

当把一个函数赋值给一个变量的时候，不要把函数的括号也包括进去里面，否则控制台将会报错

回调函数

image.png

主函数调用应用层底下的Library function()
应用层底下的Library function()调用callback function()

Function bind绑定函数的事件

Demo1

    var Page = {
        init: function () {
            this.node = document.body
            this.bind()
        },
        bind: function () {
            var _this = this
            this.node.addEventListener('click', function () {
                _this.sayHello()
            })
        },
        sayHello: function () {
            console.log('hello.....' + this.node.innerText)
        }
    }
    Page.init()

当点击函数的dom节点的时候，函数会输出

image.png

然而当把函数中的回调函数改为this.sayHello.bind(this)

Demo2

document.addEventListener('click', function (e) {
        var _document = this;
        setTimeout(function () {
            console.log(this);
        }, 200);
    }, false);

image.png

修改setTimeout函数，增加bind方法的调用的实现

document.addEventListener('click', function (e) {
        var _document = this;
        setTimeout((function () {
            console.log(_document);
        }).bind(this), 200);
    }, false);

image.png

通过call函数调用

call 和 apply 通常是一个排序和创建的顺序

function sum() {
        var result = 0
        Array.prototype.forEach.call(arguments, function (value) {
            console.log(value)
            result += value
        })
        console.log(result)
    }
    sum(3, 4, 2, 1)

call apply 调用一个参数，传入函数上下文及参数
利用call函数调用Array的方法进而获取Array的函数方法而得到结果

通过silce的apply方法来获取arguments

function sum2() {
        var args = Array.prototype.slice.call(arguments, 0)
        console.log(Array.isArray(args))
    }

    sum2(3, 4, 1, 6)

result

arguments 是一个对应于传递给函数的参数的类数组对象。

var arr = [3, 1, 0, 8, -10]
console.log(Math.max.apply(null, arr))

Math.max.apply(null,arr)可以把它当做Math.max(arr)
Ma