函数

函数的定义方式

自定义函数(命名函数)
函数表达式(匿名函数)
利用 new Function("参数1","参数2","函数体")

注意：所有函数都是Function的实例

this的指向

调用方法	this指向
普通函数调用	window
构造函数调用	实例对象，原生对象中的方法也是指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

// 普通函数 this指向window对象
function fun1(name){this.name = nameconsole.log(this);}
// 构造函数 this指向构造函数的实例对象
function Student(name,age){this.name = name;this.age = age;console.log(this);// 方法this.sing =  function(){console.log("唱跳rap");console.log(this);}}
// 对象方法 this指向所属对象
var obj = {fun2 : function(){console.log(this);console.log("对象方法");}
}// 绑定事件的函数 this指向的是事件绑定的元素
// 获取元素
let btn = document.querySelector("button");
// 绑定事件
btn.addEventListener("click",function(){console.log("点击了绑定事件",this);},false)// 定时器函数 this指向的是window对象
setTimeout(function(){console.log("定时器",this);},1000)// 立即执行函数 this指向的是window对象
(function(){console.log("立即执行函数",this);})()// 运行函数
fun1.call()
let zhaoshun = new Student("赵舜",12);
console.log(zhaoshun.sing);
obj.fun2()

改变this指向的方法

call方法

call()可以调用函数

call()可以改变这个函数的this指向，此时这个函数的this就指向了call()里面的第一个对象

// 定义函数
function fn(x,y){console.log("我想吃芒果");console.log(this);console.log(x+y);
}
// 定义对象
var obj = {name:"jesse"
}
// 调用函数
fn.call()
// 可以改变这个函数的this指向
fn.call(obj,1,2)

fn.call()中的this指向的是window对象

fn.call(obj,a,b)中的this指向的是obj对象

apply方法

fun.apply(thisArg,[argsArray])

thisAry:在fun函数运行时，指定的this值
argsArray:传递的值，必须包含在数组中
返回值就是函数的返回值，因为他就是调用函数

// 定义一个函数
function fun(){console.log(this);}
// 定义一个对象
var obj = {name:"zhaoshun",age:12
}
// this指向的是obj对象
fun.apply(obj)

运行结果：

{name: "zhaoshun"age: 12
}

注意：

apply也是调用函数，第二个参数可以改变函数内部的this指向
第二个参数必须是数组
apply的主要应用，可以借助apply求得数组的最值

bind方法

bind()方法不会调用函数，但是会改变函数内部this的指向。

fun.bind(thisArg,arg1,arg2,...)

thisArg：在fun函数运行时指定的this值
arg1，arg2：传递的其他参数
返回由指定的this值和初始化采纳数改造的原函数的拷贝

// 定义一个函数
function func(a,b){console.log(this);console.log(a+b);}
// 定义一个对象
var obj = {name:"zhaoshun",age:12
}
// this指向的是obj对象
fun.apply(obj);
// bind改变func函数的this指向，同时返回的是改变this之后的产生的新函数
var f = func.bind(obj,1,2);
// 运行函数
f()

应用在定时器中：

// 获取元素
var btn = document.querySelector("button");
btn.addEventListener("click",function(){console.log("打印了",this);// 当点击了按钮之后将其进行禁用this.disabled = true// 加一个定时器，定时进行解除禁用setTimeout(function(){this.disabled = falseconsole.log("解除了禁用");//此处的this在定时器外面，因此this指向的是btn这个事件绑定的对象}.bind(this),3000)
})

call方法

call、apply、bind方法总结

属性	异同
相同点	都可以改变函数内部的this指向
区别点	call和apply会调用函数，并且改变函数内部this指向。call和apply传递的参数不一样，call传递参数`arg1`，`arg2`…形式，apply必须是数组形式[args]。bind不会调用函数，可以改变函数内部的this指向。
主要应用场景	call经常用于继承。apply经常跟数组有关系，比如借助于数学对象实现数组的最值。bind不会调用函数，但是还行改变函数内部this的指向，比如改变定时器内部的this指向。

等一下( •́ .̫ •̀ )，我还有最后一句话：
我爱你，
他们说，
海最深邃，
干净而又透明，
我想，
是因为他们没有看到你的眼睛，
再见…

江在川上曰：JS函数相关推荐

江在川上曰：js中的JSON解析和序列化
江在川上曰:js中的JSON解析和序列化 JSON解析和序列化 JSON是javascript的一个严格的子集,利用了javacript中的一些模式来表示结构化数据.他只是一种数据格式,并非一种编程语 ...
江在川上曰：webpack前端工程化
前端工程化 1.模块化相关规范 1.1浏览器端模块化规范名称文件 AMD Require.js CMD Sea.js 1.2 服务器端模块规范 common.js 1.3 大一统的模块化规范(ES ...
江在川上曰：less样式预编译
less样式预编译 1.css原生变量定义使用"–"进行变量定义使用var()进行变量的引用 --bgColor:red; background:var(--bgColor); ...
江在川上曰：vue中使用swiper
vue中使用swiper 1 安装 //这是swiper组件 npm install vue-awesome-swiper --save-dev //这是swiper组件的依赖包 npm instal ...
江在川上曰：云服务器上的flask项目部署(Ubuntu+Flask+Gunicorn+Supervisor+Nginx+Anaconda)
云服务器上的flask项目部署(anaconda.python.flask等相关安装) 在探索未知的路上走了很多弯路,这里记载了我在阿里云上部署项目切实可行的步骤,当然问题因人而异,没有四海皆适用的准 ...
php函数计算加法,JavaScript_javascript实现一个数值加法函数，废话不多说，直接奉上代码 JS - phpStudy...
javascript实现一个数值加法函数废话不多说,直接奉上代码 JS function Sum(arg1,arg2){ //数值加法函数 var sarg1 = new String(arg1); ...
JS中编写函数去除HTML标签,js函数获取html中className所在的内容并去除标签
js函数获取html中className所在的内容并去除标签复制代码代码如下: function queryClass(classnames){ var classobj= new Array() ...
Ext.NET加入自定义验证JS函数
ExtJS验证很方便,在使用FormPanel的时候,我们可以很方便的进行验证.比如设置必填项.正则.字段类型等等.比如如下所示: 上面的验证是这么写的: <Listeners><C ...
js函数声明和函数表达式的区别
Javascript Function无处不在,而且功能强大!通过Javascript函数可以让JS具有面向对象的一些特征,实现封装.继承等,也可以让代码得到复用.但事物都有两面性,Javascrip ...

江在川上曰：JS函数

函数

函数的定义方式

this的指向

改变this指向的方法

call方法

apply方法

bind方法

call方法

call、apply、bind方法总结

江在川上曰：JS函数相关推荐

最新文章

热门文章