JavaScript绑定this

问题描述

var a = {
    one: 1,
    haha() {
        console.log(this.one)
    }
}
setTimeout(a.haha, 1000)

在上例中,函数haha引用了this.one,而定时器结束之后调用的haha传入的this并不是a,输出结果this.one是未定义变量。

方法一:使用箭头函数的方式设置回调

var a = {
    one: 1,
    haha() {
        console.log(this.one)
    }
}
setTimeout(() => {
    a.haha()
}, 1000)

方法二:手动指定this

var a = {
    one: 1,
    haha() {
        console.log(this.one)
    }
}

function go(func) {
    func.bind(a).call()
}

go(a.haha)

原文地址:https://www.cnblogs.com/weiyinfu/p/10258290.html

时间: 01-11

JavaScript绑定this的相关文章

javascript绑定事件addEventListener与attachEvent

1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等. handle:事件句柄函数,即用来处理事件的函数: useCapture:Boolean类型,是否使用捕获,一般用false: 2.eleObj.at

javascript绑定事件

本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type',function(){},bool) removeEventListener ('type',function(){},bool) 2)IE事件模型:仅支持事件冒泡 attachEvent('type',function(){}); detachEvent('type',fucntion(){}

自己写的javascript绑定模型 基于jquery

//绑定模型 $.bind = {}; //绑定基础 $.bind.base = function (get, set) { return function (o) { if (typeof (o) != 'undefined') { set(o); }; return get(); }; }; //绑定文本 $.bind.text = function (element,func) { var $el = element; return $.bind.base(function () { re

JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定.举个例子: <input type="button" value="点我呦" onclick="alert("he

JavaScript初探二

//----------总结 //01.查找dom元素 document.getElementById();//通过id获取一个dom元素 document.getElementsByClassName();//通过class获取dom数组 document.getElementsByTagName();//通过标签名获取dom数组 //02.修改dom元素 dom.type = "text"//type属性 dom.innerHTML//双标签的文本值 这里注意innerText d

jqeury bind 绑定事件与 unbind删除绑定事件

<1> <html> <head> <title></title> <script src="../jquery-2.1.3.js"></script> </head> <body> <button id="a">a</button> <button id="b">b</button> <

jQuery与JavaScript与ajax三者的区别与联系

简单总结: 1.JS是一门前端语言. 2.Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新. 3.jQuery是一个框架,它对JS进行了封装,使其更方便使用.jQuery使得JS与Ajax的使用更方便 关系比喻: 若把js比作木头,那么jquery就是木板(半成品) jQuery与ajax都是js的一个框架,各有各的功能,若js是父亲的话,jquery与ajax就是两个儿子 详细情况: 1.javascript是一种在客户端执行的脚本语

JavaScript初探 二

//----------总结01.查找dom元素 document.getElementById();//通过id获取一个dom元素document.getElementsByClassName();//通过class获取dom数组document.getElementsByTagName();//通过标签名获取dom数组 //02.修改dom元素 dom.type = "text"//type属性dom.innerHTML//双标签的文本值 这里注意innerTextdom.valu

Browser

浏览器中关于事件的那点事儿 作者: 顽Shi  发布时间: 2014-02-01 20:22  阅读: 7830 次  推荐: 25   原文链接   [收藏] 摘要:事件在Web前端领域有很重要的地位,很多重要的知识点都与事件有关.本文旨在对常用的事件相关知识做一个汇总和记录. 在前端中,有一个很重要的概念就是事件.我对于事件的理解就是使用者对浏览器进行的一个动作,或者说一个操作. 本文会介绍很多与事件有关的东西,虽然我的出发点有那么点一网打尽的意思m不过也难以盖全,所以就把最常用,最基本也相

(转)AJAX工作原理及其优缺点

1.什么是AJAX?AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML+CSS来标准化呈现:使用XML和XSLT进行数据交换及相关操作:使用XMLHttpRequest对象与Web服务器进行异步数据通信: 使用Javascript操作Document Object Model进行动态显示及交互: 使用JavaScript绑定和处理所有数据. 2.与传统的we