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);//1
myObject.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
}
//以方法的形式来调用double
myObject.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(); //global
foo.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 指该对象 ...
随机推荐
- 整理的一些数据库不容易想到的SQL语句实例一
1.行转列SQL语句 SELECT * FROM ( SELECT [FID] , [Weeks] , [Qty] FROM dbo.TempTable where Weeks is not null ...
- Asp.Net MVC 常用开发方式之EF Code First
在我们的工作和学习当中,经常会遇到中小型项目,这些项目除了业务上的区别较大外,对于底层和数据访问,其实都差不多.记得以前做项目时,每次都要重复的写底层操作数据库的代码,不仅浪费时间,也无太大意思,后来 ...
- ubuntu中Mysql常用命令整理
启动mysql服务sudo /etc/init.d/mysql start 关闭mysql服务sudo /etc/init.d/mysql stop
- shell基础认识
Shell 我们在终端下写命令Linux内核是看不懂的必须通过shell解释成内核可执行的代码 这就是shell(其实解释命令这只是它的一个功能模块,shell还可以用来进行程序设计) 有点类似win ...
- jQuery插件autoComplete使用详解
安装/需要引入的文件 <script type="text/javascript" src="../js/jquery-1.8.3.min.js.js"& ...
- inline-block代替浮动布局float:left列表布局最佳方案
基于各位前辈的辛勤劳动,下面得出使用inline-block替换float:left;的最佳方案. html代码 <div class="list"> <ul&g ...
- IE6下不能定义1px高度的容器和IE6 双边距
(1)触发的条件---定义一个div,将容器的高度设置成1px (2) 编码得到的结果---在IE6浏览器中,容器的高度不是1px 而是18px (3)出现问题的原因---是因为IE6浏 ...
- what oop ?
最近在做一个app的后台代码.......到底是什么是Oop ,没有感觉到啊,,,,,
- numpy 札记
transpose 在处理caffe读入的图片数据时,需要将原始图片的数据 H*W*3(height*width*RGB) 转换为 3*H*W(RGB*heigth*width) 需要用到numpy的 ...
- WINDOWS硬件通知应用程序的常方法(五种方式:异步过程调用APC,事件方式VxD,消息方式,异步I/O方式,事件方式WDM)
摘要:在目前流行的Windows操作系统中,设备驱动程序是操纵硬件的最底层软件接口.为了共享在设备驱动程序设计过程中的经验,给出设备驱动程序通知应用程序的5种方法,详细说明每种方法的原理和实现过程,并 ...