js中this的四种使用方法
0x00:js中this的四种调用模式
1,方法调用模式
2,函数调用模式
3,构造器调用模式
4,apply、call、bind调用模式
0x01:第一种:方法调用模式 (也就是用.调用的)this就是这个对象本身
当一个函数被保存为对象的一个属性时,我们称它为一个方法,当一个方法被调用时,this被绑定到该对象,如果一个调用表达式包含一个属性表达式(即一个.点表达式或者[subscript]下标表达式)那么它被当做一个方法调用.
var myObject = {value:;increment:function(inc){this.value + = typeof inc === 'number'?inc:;}}myObject.increment();document.writeln(myObject.value);//1myObject.increment();document.writen(myObject.value;)
0x02:第二种:函数调用模式
当函数并非一个对象的属性时,那么它被当做一个函数来调用:
var sum = add(,);
//给myObject增加一个double方法myObject.double = function(){that = this;var helper = function(){that.value = add(that.value,that.value);}helper();以函数的形式来调用helper}//以方法的形式来调用doublemyObject.double();document.wtiten(myObject.getValue());//6
0x03:第三种:构造函数调用模式
var Class = function(){this.value = ;}var class = new Class();console.log(class.value); //100
我们通过new关键字来调用构造函数,此时this会绑定在该新对象上(也就是这个实例对象上)
0x04:第四种:apply和call以及bind的调用模式:指定绑定对象
var myObject = {value:};var foo = function(){console.log(this);};foo(); //globalfoo.apply(myObject);//{value:100}foo.call(myObject);//{value:100}var newFoo = foo.bind(myObject);newFoo(); //{value:100}
apply()方法接受两个参数第一个是函数运行时的作用域,另一个是参数的数组(arguments)
call()方法第一个参数与apply是一样的,第二个参数需要一个个列举出来
call方法更接近我们平时调用函数,而apply需要我们传递 Array形式的数组做为参数,它们是可以相互转换的
js中this的四种使用方法的更多相关文章
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- JS 中深拷贝的几种实现方法
JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...
- stl中map的四种插入方法总结
stl中map的四种插入方法总结方法一:pair例:map<int, string> mp;mp.insert(pair<int,string>(1,"aaaaa&q ...
- js中this的四种调用模式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS中常见的几种继承方法
1.原型链继承 // 1.原型链继承 /* 缺点:所有属性被共享,而且不能传递参数 */ function Person(name,age){ this.name = name this.age = ...
- js中index()的四种经典用法(转https://blog.csdn.net/superit401/article/details/51726826)
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- js中index()的四种经典用法111
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS中this的四种用法
1.在一般函数方法中使用 this 指代全局对象 2.作为对象方法调用,this 指代上级对象 3.作为构造函数调用,this 指代new 出的对象 4.apply 调用 ,apply方法作用是改变函 ...
- JS中 this 的四种用法
1.在一般函数中使用 this 指全局对象 window function fn(){ this.x = 1 } fn(); //相当于window.fn() 2.作为对象方法使用 this 指该对象 ...
随机推荐
- QT正则表达式
QT正则表达式有一个问题,当初始状态是不符合正则表达式时,能够输入任意字符,若在输入过程中符合正则表达式,马上进入字符检测状态,即只能接受符合正则表达式的字符.
- Programming C#.Interfaces
类实现一个接口时,它必须实现该接口的所有部分(方法和属性等),效果相当于类要表明:“我同意履行这个接口所定义的协定.” 从抽象类继承实现了“is-a(是一种)”关系,实现接口时一种“implement ...
- 添加nginx为系统服务(service nginx start/stop/restart)
1.在/etc/init.d/目录下编写脚本,名为nginx #!/bin/sh # # nginx - this script starts and stops the nginx daemon # ...
- ubuntu12.04常见错误总结
1.通过终端安装程序sudo apt-get install xxx时出错: E: Could not get lock /var/lib/dpkg/lock - open (11: Resource ...
- 航频之声APP截图
上传github的APP截图......
- 用CSS3绘制图形
参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载,为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...
- Python Tensorflow下的Word2Vec代码解释
前言: 作为一个深度学习的重度狂热者,在学习了各项理论后一直想通过项目练手来学习深度学习的框架以及结构用在实战中的知识.心愿是好的,但机会却不好找.最近刚好有个项目,借此机会练手的过程中,我发现其实各 ...
- gulp+webpack+vue
gulp+webpack+vue 章节目录 1.目标 2.实现 2.1合并库文件 2.2组织业务代码 2.3打包开发代码 2.4使用webpack-dev-server和热替换插件HotModuleR ...
- impala安装
http://blog.sina.com.cn/s/blog_8c6d7ff60101e3lh.html ----------------------------------------------- ...
- 2014第16周三CSS布局再学习摘录
今天尝试写了下前端页面,费了不少时间,做出的结果仍然惨不忍睹,感觉很简单的几个页面,在现有框架多个样式混杂下就是感觉很不自在随意,晚上回来又看了些div+css方面的基础知识. 1.CSS的class ...