js this
时间:2019-09-30
本文章向大家介绍js this,主要包括js this使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
由于 Javascript(简称:JS)中的 this 理解起来较为复杂,使得很多入门新手和一些进入前端圈子有些年限的工程师们都对其的用法有些模糊。所以今天为大家带来 Javascript(简称:JS) 中 this 的用法详解。 this 永远指向 调用 包含 自己(this本身) 的 函数 对应的对象。 也就是说,包含 this 的函数 只在乎是谁调用了它,跟在哪里进行的函数声明没有关系。 下面就来举个例子说明: function test(){ var a = 1; console.log(this.a); } test(); //undefined 如果函数在最外层直接运行,默认绑定的对象是 window,因为 test() 是被window对象调用的,所以这里的 this.a 对应的应该是 全局变量(或者叫window变量) 而不是test函数里的局部变量,由于 在 window 对象中没有声明 变量a,所以输出 undefined。 下面我们对代码进行改造一下: var a = 2; //window对象下的变量 function test(){ var a = 1; console.log(this.a); } test(); // 打印结果为 2 下面再来分析一个经典的例子: var name = 'China'; var obj = { name : 'America', show : function() { console.log(this.name) } } obj.show(); // America 从上述代码可以看出,包含 this 的函数是 show(),而show()函数通过对象obj调用的,所以 this.name 指向 obj 中的 name(America); 我们再来对代码进行改造: var name = 'China'; var obj = { name : 'America', show : function() { return function(){ console.log(this.name); } } } var a = obj.show(); a(); // China 这里的 obj.show() 返回的是一个匿名函数 function(){ console.log(this.name); } 然后赋值给 变量a,等价于: var a = function(){ console.log(this.name); } 或 function a(){ console.log(this.name); } 所以 最后执行的 a()== window.a(), 函数a 里面的 this.name 指向 window.name('China'),所以最终输出 China。 看到这里,相信大家对 this 已经有个比较清楚的认识了,下面给大家介绍4种 this 常用的场景。 1. 在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(); // 1 2. 作为对象方法调用,this 指代上级对象 function test(){ alert(this.x); } var obj = {}; obj.x = 1; obj.m = test; obj.m(); // 1 3. 作为构造函数调用,this 指向 new 出的对象 function test(){ this.name = 'China'; } var t = new test(); console.log(t.name); //'China' 4. apply, call 调用 function Animal(){ this.name = 'animal'; } function Cat(){ Animal.call(this); } var cat = new Cat(); console.log(cat.name);// 'animal' 以上便是 this 全部的解答。
原文地址:https://www.cnblogs.com/xiaowie/p/11613086.html
- 整洁代码之道——重构
- 常见Linux调优命令和工具
- 微信群之间消息自动转发简明教程(Github上免费共享有代码和教程)
- 使用CNN+ Auto-Encoder 实现无监督Sentence Embedding (代码基于Tensorflow)
- Flume日志收集系统架构详解
- 讨厌算法的程序员 | 第六章 归并排序
- 基于Spark /Tensorflow使用CNN处理NLP的尝试
- 一个优雅的框架 | Pytorch 初体验
- ffmpeg的时基
- FFmpeg菜鸡互啄#第7篇#文件/rtsp推流到rtmp
- H.264格式分析
- JS高级-数据结构的封装
- JS数组去重的三种方法
- 秒懂JS对象、构造器函数和原型对象之间的关系
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法