JavaScript中window和this的区别介绍

~夏秋～

已于 2022-11-22 20:15:36 修改

阅读量594

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 windows javascript BOM

于 2022-11-21 15:46:41 首次发布

本文链接：https://blog.csdn.net/qq_53414724/article/details/127965752

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1、数执行时，this总是指向调用该函数的对象

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

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

4、改变this的指向

bind()方法

编辑apply方法：

window对象

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

document 页面

document是我们进行js操作必须接触的，具体内容可以查看以往博客。

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