JavaScript中this的用法 及 如何改变this的指向
要懂得JavaScript中this的用法,首先需要知道,JavaScript中的作用域相关知识。
var fun = function(){
var flag = 1;
console.log(flag);
}
var flag = 0;
fun();
console.log(flag);
首先看上面这段代码,结果 : 1 0
这个很好理解了,打印的函数内部 flag 的值为 1,全局打印 flag 的值为0。
那么再如果函数内部打印 this.flag 呢?
var fun = function(){
var flag = 1;
console.log(this.flag)
}
var flag = 0;
fun();
console.log(flag);
结果: 0 0
this.flag 指向的是当前作用域下的 flag 值,fun() 函数在全局调用,那么作用域便为全局,而全局的 flag 值为 0,遂打印的结果便为 0
那么接下来看看this在不同的几种情况下的指向问题
注意:函数内部的this不是在函数定义时决定的,而是在函数调用时决定的
1、普通的 函数调用方式,内部this指向window(普通函数调用等于window.fun())
function fun(){
console.log(this)
}
var fun = function(){
console.log(this)
}
var fun = function(){
var fun2 = function(){
console.log(this)
}
}
(function(){
console.log(this)
})() fun()
2、定时器中的this指向window
setTimeout(function(){console.log(this)},1000)
3、构造函数中this的指向(通过new关键字调用才是构造函数)
// 在调用一个方法时,对象.方法名();方法内部this指向调用者
function Fun(name){
this.name = name
}
Student.prototype.fun = function(){
console.log(this.name)
} var fn = new Fun('Bob')
fn.fun()
4、事件处理程序中,this指向事件源
document.onclick = function(){
console.log(this)
}
改变 this 的指向
1、call 方法:
语法:函数名.call(调用者,实参1,实参2……)
注意:当函数被借用时,会立即执行,并且函数体内this会指向借用者或调用者
function fun(name,age){
this.name = name
this.age = age
} var obj = {}
fun.call(obj,'Bob',20) ; // 会立即执行一次函数,this指向obj
2、apply 方法:
语法:函数名.apply(调用者,[实参1,实参2……])
注意:当函数被借用时,会立即执行,并且函数体内this会指向借用者或调用者
function fun(name,age){
this.name = name
this.age = age
} var obj = {}
fun.apply(obj,['Bob',20]) ; // 会立即执行一次函数,this指向obj
3、bind 方法:
语法:函数名.bind(调用者,实参1,实参2……)
注意:当函数被借用时,不会立即执行,会返回一个新的函数,并且新的函数需要我们自己调用
function fun(name,age){
this.name = name
this.age = age
} var obj = {}
var newFun = fun.bind(obj,'Bob',20)
newFun()
改变 this 指向的 - 栗子
要求:伪数组运用数组的push方法:
// 数组与伪数组的相关知识准备 // 伪数组的特点: // a、伪数组是一个对象 // b、这个对象必须有一个 length 属性 // c、如果这个对象的 length 不为0,那么就要有按下标存储的数据 // d、伪数组没有数组才有的一些方法,比如 push shift 等
// 【伪数组】 var nums = {
0:'a',
1:'b',
2:'c',
3:'d',
length:4
} // 借用数组中的 push 方法
Array.prototype.push.call(nums,'e','f')
JavaScript中this的用法 及 如何改变this的指向的更多相关文章
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- javascript中 try catch用法
javascript中 try catch用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-08-16我要评论 JS try catch语句一般在什么情况下使用?是必须使 ...
- 从函数调用的角度,探讨JavaScript中this的用法
js函数调用方式大概可分为:函数调用,构造器调用,call或apply,方法调用四种方式.下面结合一些基础概念和实测代码,从函数调用的角度,探讨JavaScript中this的用法. 1. new对函 ...
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”
JavaScript中的setInterval用法(资料来源:博主---八神吻你 ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...
- javaScript中with的用法
1 JavaScript中的with语句的作用是为逐级的对象访问提供命名空间式的速写方式, 也就是在指定的代码区域, 直接通过节点名称调用对象 初次接触到with用法,是这样一段代码: 1 2 3 4 ...
- javascript中的继承用法
本文实例汇总了javascript关于继承的用法,希望本文所述对大家的javascript程序设计有所帮助.分享给大家供大家参考.具体如下:代码如下: /** * 实现子类继承父类,但不会产生多余的属 ...
- JavaScript 中 this 的用法
在 JavaScript 中,this 是动态绑定,或称为运行期绑定的.一般而言,在Javascript中,this 指向函数执行时的当前对象. 由于其运行期绑定的特性,JavaScript 中的 t ...
- JavaScript中一些怪异用法的理解
引言 JavaScript这门语言有些场合的用法还是比较怪异的.这篇文章会尽量将这门语言特有的一些比较特殊的用法收集在一起.就当是平时开发时需要注意的地方吧. 特殊用法收集 1.!!用法 在JavaS ...
随机推荐
- node.js之爬虫
nodejs爬取数据出现编码错误的问题 可以使用 superagent-charset 和 superagent 模块进行处理 var charset = require('superagent-ch ...
- Css预处理器---Less(二)
三.Less语法 (1)变量 //less代码 @nice-blue : #5B83AD; @light-blue : @nice-blue + #111; #header { color : @li ...
- Ajax三级联动
全国省市县查询 html代码 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- python:基于tkinter的定时关机程
本人使用python3 from tkinter import* import os from PIL import Image, ImageTk root=Tk() a=Label(root,tex ...
- MD5解密
国外http://md5.rednoize.com/http://www.milw0rm.com/md5/list.php国内http://www.neeao.com/md5/http://www ...
- Vue系列之 => 钩子函数生命周期
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- sitecore系列教程之Sitecore个性化-配置文件,模式和角色
这是利用Sitecore规则引擎实现数字化转换的三部分系列的第二部分.阅读上一篇文章,通过为您的个性化体验定义内容策略来设置基础. Sitecore有一个非常强大的规则引擎,可以帮助推动个性化的用 ...
- 【Redis学习之六】Redis数据类型:集合和有序集合
环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 redis-2.8.18 一.集合 Set无序的.去重的元素 ...
- locust 的使用
Contents Locust这一款开源性能测试工具.然而,当前在网络上针对Locust的教程极少,不管是中文还是英文,基本都是介绍安装方法和简单的测试案例演示,但对于较复杂测试场景的案例演示却基本没 ...
- python二叉树的深度遍历之先序遍历流程图