apply和call:改变this指向
apply和call方法中如果没有传入参数,或者是传入的是null,那么调用该方法的函数对象中的this就是默认的window
f1.apply(); / f1.apply(null);
f1.apply(null,[100,200])
f1.apply(null,100,300)
apply和call都可以让函数或者方法来调用,传入参数和函数自己调用的写法不一样,但是效果是一样的
<script>
function Person(age,sex){
this.age=age;
this.sex=sex;
}
//通过原型添加方法
Person.prototype.sayHi=function(x,y){
console.log('您好'+this.sex);
};
var per=new Person(10,"男");
per sayHi();
console.log("==============");
function Student(name,sex){
this.name=name;
this.sex=sex;
};
var stu=new Student("小明","人妖");
per.sayHi.apply(stu,[10,20]);
per.sayHi.call(stu,10,20);
</script>
图片发布于简书APP
bind方法:
通过对象,调用方法,产生随机数
<script>
function ShowRandom(){
//1-10随机数
this.number=parseInt(Math.random()*10+1);
}
//添加原型方法
ShowRandom.prototype.show1=function(){
window.setInterval( this.show2.bind(this),1000);
};
//添加原型方法
ShowRandom.prototype.show2=function(){
//显示随机数
console.log(this.number);
};
//实例对象
var sr=new ShowRandom();
//调用函数,输出随机数字
//调用这个方法一次,可以不停的产生随机数字
sr.show1();
</script>
函数中成员介绍:
函数中有一个name属性-------》函数的名字,name属性是只读的,不能修改
函数中有一个argument属性----》实参的个数
函数中有一个length属性----》形参的个数
函数中有一个caller属性----》调用(f1函数在f2函数中调用,所以,此时调动者是f2)
函数作为参数
<script>
function f1(fn){
console.log("f1是函数");
fn();//此时fn当做是一个函数使用
}
//fn是参数,最后作为函数使用 ,函数是可以作为参数使用
//传入匿名函数
f1(function(){
console.log('我是匿名函数');
});
//命名函数
function f2(){
console.log('f2的函数');
}
f1(f2);
//函数作为参数的时候,如果是命名函数,那么只传入命名函数的名字,没有括号
</script>
定时器中传入函数
function f1(fn){
setInterval(function(){
console.log('定时器开始');
fn();
console.log("定时器结束");
},1000);
}
f1 (function(){
console.log('好嘞');
});
获取某个对象的数据类型的样子
object.prototype.tostring.call(对象);//此时得到的 就是这个对象的类型的样子
图片发布于简书APP
小案例:排序
<script>
var arr=[1,23,12,54,34,667,23,12];
//排序---函数作为参数使用,匿名函数作为sort方法的参数使用,那么此时的匿名 函数中有两个参数
arr.sort(function(obj1,obj2){
if(obj1>obj2){
return -1;
}else if(obj1==obj2){
return 0;
}else{
return 1;
}
});
console.log(arr);
</script>
作用域链:
图片发布于简书APP
闭包:
闭包的概念:函数A中,有一个函数B,函数B中可以访问函数A 中定义的变量或者数据,此时形成了闭包(不够严谨)
闭包的模式:函数模式的闭包,对象模式的闭包
闭包的作用:缓冲数据,延长作用域链
闭包的优点和缺点:缓存数据
<script>
//函数模式的闭包:在一个函数中有一个函数
function f1(){
var num=10;
//函数的声明
function f2(){
console.log(num);
}
//函数调用
f2();
}
f1();
//d对象模式的闭包:函数中有一个对象
function f3(){
var num=10;
var obj={
age:num
};
console.log(obj.age);
}
f3();
</script>
闭包:累加
<script>
function f1(){
var num=10;
return function(){
num++;
return num;
}
}
var ff=f1();
console.log(ff());//11
console.log(ff());//12
console.log(ff());//13
</script>
闭包产生三个相同的随机数:
<script>
//闭包的方式,产生三个相同的随机数
function f1(){
var num=parseInt(Math.random()*10+1);
return function(){
console.log(num);
}
}
var ff=f1();
ff();
ff();
ff();
</script>
总结:如果想要缓存数据,就把这个数据放在外层的函数和理层的 函数中间位置
闭包作用:缓存数据;缺点:没有及时释放
局部变量实在函数中,函数使用结束后,局部变量就会被自动释放,闭包后,里面 的局部变量的使用作用域链就会被延长
闭包案例:实现点赞
<style>
ul{
width: 1000px;
height:300px;
border: 1px solid red;
margin:0 auto;
}
li{
width: 200px;
height: 200px;
float: left;
list-style: none;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li><img src="./image/1.jpg"><br/><input type="button" name="" value="赞(1)"></li>
<li><img src="./image/1.jpg"><br/><input type="button" name="" value="赞(1)"></li>
<li><img src="./image/1.jpg"><br/><input type="button" name="" value="赞(1)"></li>
<li><img src="./image/1.jpg"><br/><input type="button" name="" value="赞(1)"></li>
</ul>
</body>
<script src="xiec.js"></script>
<script>
//获取标签名字获取元素
function my$(tagName){
return document.getElementsByTagName(tagName);
}
//闭包缓存数据
function getValue(){
var value=2;
return function(){
//每次点击的时候,都应该改改变当前点击按钮的value值
this.value="赞("+(value++)+")";
}
}
//获取所有按钮
var btnObjs=my$("input");
//循环遍历每个按钮,注册点击事件
for (var i=0;i<btnObjs.length;i++){
//注册事件
btnObjs[i].onclick=getValue();
}
</script>
沙箱:(沙箱是一种按照安全策略限制程序行为的执行环境)
图片发布于简书APP
<script>
(function(){
var str="小奥比喜欢小黑";
str=str.substr(3);
console.log(str);
}());
//沙箱
(function(){
var str="小奶喜欢嘻哈";
str=str.substr(2);
console.log(str);
}());
</script>
沙箱操作页面元素
图片发布于简书APP
递归:
<script>
//递归实现n个数字求和
function getSum(x){
if(x==1){
return 1;
}
return x+getSum(x-1);
}
console.log(getSum(100));
</script>
网友评论