JavaScript之this和window

JavaScript之this和window

引言

  在我们日复一日的工作和学习中，总有一些内容是我们必须得牢牢掌握并可以熟练运用的。this和window就在其中。下面，我对这两个关键字做了一些总结，希望可以帮助到大家。

window对象

  所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法。甚至（HTML DOM 的）document 对象也是 window 对象属性。平常经常用到的是window的子对象。

document 页面

document是我们进行js操作必须接触的，这里是一些必要的选择器，本篇文章不做重点介绍，如果看官想要了解详细信息，可以去我的主页看DOM选择器的介绍

history 历史记录

History 对象包含用户(在浏览器窗口中)访问过的 URL。
history.back() 加载历史列表中的前一个 URL（如果存在）。
history.forward() 加载历史列表中的下一个 URL。
history.go(0):可以刷新当前网页

location 地址url

Location 对象包含有关当前 URL(统一资源定位符) 的信息。（Uniform Resource Location），可通过 window.location 属性来访问。常见的一个操作是：
location.href 返回完整的 URL。
location.assgin() 使窗口载入并显示指定URL中的文档，保留浏览历史；

navigator 浏览器信息

navigator.appName 返回浏览器的名称。
navigator.platform 返回运行浏览器的操作系统平台。

screen 屏幕

Screen 对象包含有关客户端显示屏幕的信息。
screen.height 返回显示屏幕的高度。 width 返回显示器屏幕的宽度。
screen.availHeight 显示屏幕的可用高度 (除 Windows 任务栏之外)。
screen.availWidth 显示屏幕的可用宽度 (除 Windows 任务栏之外)。

this关键字

这是本篇博客重点讲解的，也是工作学习中必备的，请大家自习阅读。
1、数执行时，this总是指向调用该函数的对象（即：判断this所在的函数属于谁）。

	function fun(){
        console.log(this.n);
    }
    var obj = {};
    obj.n = "在这里";
    obj.m = fun;
    obj.m();　　　　//执行结果为：在这里

2、函数没有所属对象时，就指向全局对象（window）

 	var n = "指我";
    function fun(){
        console.log(this);
    }
    console.log(window.n);//指我
    console.log(this.n);  //指我    
    fun();//

执行结果：

3、作为构造函数使用时，this 指的是构造函数生成的对象

	function fn(){
        this.x = 123; //this是调用该函数的obj对象
    }
    var obj = new fn(); //执行结果为：obj = {x:123}

4、怎么改变this的指向呢？
bind()方法
bind的功能是什么？
第一个参数：
改变当前函数的this的指向
怎么改？
bind的第一个参数，就是改变之后的this的指向
bind自身只会改变函数中的this，暂时不会执行，只会将改变之后的新函数，返回
bind返回的新函数，中的this指向，必然指向bind的第一个参数。
后面所有参数：除了第一个参数，后面所有参数，会作为正常实参，传给新函数

    注意：bind自身并不会自动执行这个返回的新函数，如果有需要，得自己手动执行
 

    示例代码如下：

	function fun(){
        console.log(this);
    }
    fun();
    var obj={a:"haha"};
    fun.bind(obj);
    obj.fun=fun;
    obj.fun();

执行结果：

apply方法：
apply 方法作用是改变函数的调用对象，此方法第一个参数为改变后的调用函数的对象，函数里this指第一个参数。
示例代码及执行结果如下：

	var x = 11;
    function fn(){
        console.log(this.x)    
    }
    var obj = {fn:fn,x:"22"}
    var obj2 = {x:"33"}
    obj.fn.apply(); // 11 ,apply()参数为空时，默认调用的是全局对象，this当前指全局对象
    obj.fn.apply(obj); // 22
    obj.fn.apply(obj2); // 33

结语

程序猿的路上，且行且学，永不止步！！！