IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript 高级编程 this 指向问题【3】 -> 正文阅读

[JavaScript知识库]JavaScript 高级编程 this 指向问题【3】

例题1:

        var fullName = 'language';
        var obj = {
            fullName: 'javascript',
            prop: {
                getFullName: function () {
                    return this.fullName;
                }
            }
        };
        console.log(obj.prop.getFullName()); // 这里输出什么?
        var test = obj.prop.getFullName;
        console.log(test()); // 这里输出什么

第一个地方输出undefined

第二个地方输出language

?1.?为什么第一个地方指向undefined?

????????1.1?obj是一个对象?prop也是一个对象

????????1.2?是obj里面的prop这个属性调用了getFullName,本质就是prop调用了getFullName

????????1.3?注意,prop的值本身就是一个对象,这个对象调用了方法,方法里面的this指向prop

????????1.4?而prop里面并没有getFullName,就会打印undefined

????????1.5?为什么不是报错?注意,如果对象里面没有这个值,强行打印就是undefined

        var o = {
            name: 'jmq'
        }
        console.log(o.name1); // undefined

?2. 为什么第二个地方是language?

因为这里打印language是因为test是在全局下执行

例题2:

HTML:

<input type="button" value="点击按钮1" onclick="fun()">

JavaScript:

    <script>
        function fun() {
            console.log(this);
        }
    </script>

这里特别记住,打印出来是window,写在html标签里面的onclick事件,虽然是点击事件,但是这里的fun()函数要理解为是window内置的,

类比:
alert()也是window内置的方法

 <input type="button" value="点击按钮2" onclick="alert()">

例题3:

HTML:

<input type="button" value="按钮3" id="btn3">

JavaScript:

        var btn3 = document.querySelector("#btn3");
        btn3.onclick = fun1;
        function fun1() {
            console.log(this);// 打印什么
        }

打印出来是按钮对象。为什么是按钮,不是window?

????????可以理解为btn3是一个DOM对象,onclick是对象里面的一个方法,执行的函数体就是fun1里面的内容,==>最终是按钮这个对象调用了方法,所以this指向按钮

例题4:

HTML:

    <button id="btn">点击按钮</button>

JavaScript:

问,点击按钮,最终输出什么?undefined?data里面的索引为1的数据?还是……

         var userInfo = {
            data: [
                { "username": "jmq", "id": 19 },
                { "username": "syc", "id": 20 }
            ],
            getuserInfo: function () {
                var index = 1;
                console.log(this.data[index].username + ":" + this.data[index].id);
            }
        }
        var btn = document.querySelector("#btn");
        // 问,点击按钮,最终输出什么?undefined?data里面的索引为1的数据?还是……
        btn.onclick = userInfo.getuserInfo;

最终是报错,为什么报错?

?原因是:

????????1.按钮点击,即便为userInfo这个对象调用本身的方法,this指向的依旧是按钮这个对象,所以按钮不存在data这个属性。按钮不存在这个属性,强行打印,就会报错

????????

?

? ? ? ?2.? 上面的代码可以改成如下

??btn.onclick?=?function?()?{

????????????var?index?=?1;

????????????console.log(this.data[index].username?+?":"?+?this.data[index].id);

????????}

---------------------有待二次更新

结尾:

学习id: 201903090124-

现在是大三学生,学习到了前后端交互阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-05 11:57:28  更:2021-12-05 11:59:28 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 7:30:29-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码