Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
- call (), apply (), bind () three methods
- call () and apply () method of this point can be changed.
- call () usage:
函数名字.call(对象,参数1,参数2,...); 方法名字.call(对象,参数1,参数2,...); - apply () usage:
函数名字.apply(对象,[参数1,参数2,...]); 方法名字.apply(对象,[参数1,参数2,...]); - Code:
function Person(age,name) { this.age=age; this.name=name; } Person.prototype.sayHi=function (x,y) { console.log("哈哈"+(x+y)+"===========>"+this.sex); }; function Student(sex,age,name) { this.sex=sex; Person.apply(this,[age,name]); } var per=new Person(10,"小明"); var stu=new Student("男",100,"小王"); per.sayHi.apply(stu,[10,20]);//哈哈30===========>男 per.sayHi.call(stu,10,20);//哈哈30===========>男 console.log("==========="); console.log(stu); - bind () method:
复制了一份的时候,把参数传入到了f1函数中,x===>10,y===>20,null就是this,默认就是window bind方法是复制的意思,参数可以在复制的时候传进去,也可以在复制之后调用的时候传入进去 apply和call是调用的时候改变this指向 bind方法,是复制一份的时候,改变了this的指向 函数名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个函数 方法名字.bind(对象,参数1,参数2,...);---->返回值是复制之后的这个方法
Code:
// function Person(age) {
// this.age=age;
// }
// Person.prototype.eat=function () {
// console.log("吃了"+"==========>"+this.age);
// };
// function Student(age) {
// this.age=age;
// }
// var per=new Person(10);
// var stu=new Student(100);
// var ff=per.eat.bind(stu);
// ff();
function ShowRandom() {
this.numeber=parseInt(Math.random()*10+1);
}
ShowRandom.prototype.show1=function () {
var that=this;
window.setInterval(function () {
this.show2();
}.bind(that),1000);
};
ShowRandom.prototype.show2=function () {
console.log(this.numeber);
};
var num=new ShowRandom();
num.show1();//循环显示随机数7
num.show2();//7- Several member function
函数中有一个name属性----->函数的名字,name属性是只读的,不能修改
函数中有一个arguments属性--->实参的个数
函数中有一个length属性---->函数定义的时候形参的个数
函数中有一个caller属性---->调用(f1函数在f2函数中调用的,所以,此时调用者就是f2)- Use higher-order functions as arguments
var arr = [1, 100, 20, 200, 40, 50, 120, 10];
//排序---函数作为参数使用,匿名函数作为sort方法的参数使用,那么此时的匿名函数中有两个参数,
arr.sort(function (obj1,obj2) {
if(obj1>obj2){
return -1;
}else if(obj1==obj2){
return 0;
}else{
return 1;
}
});
console.log(arr);//[1,10,20,40,50,100,120,200]- Higher-order functions as a return value
function File(name, size, time) {
this.name = name;//电影名字
this.size = size;//电影大小
this.time = time;//电影的上映时间
}
var f1 = new File("jack.avi", "400M", "1997-12-12");
var f2 = new File("tom.avi", "200M", "2017-12-12");
var f3 = new File("xiaosu.avi", "800M", "2010-12-12");
var arr = [f1, f2, f3];
function fn(attr) {
//函数作为返回值
return function getSort(obj1, obj2) {
if (obj1[attr] > obj2[attr]) {
return 1;
} else if (obj1[attr] == obj2[attr]) {
return 0;
} else {
return -1;
}
}
}
var ff = fn("name");
//函数作为参数
arr.sort(ff);
for (var i = 0; i < arr.length; i++) {
console.log(arr[i].name + "====>" + arr[i].size + "===>" + arr[i].time);
}- Scope, and the scope chain preresolved
- Scope: variables local variables (as defined in the function are local variables) and global variables, and local scope scope has global scope. Scope is the use of the variables.
Scope chain: variable is used, from the inside outward, layers of search searched for direct use. When the search scope to 0, if it is not found to the incorrect report.
var num=10; //作用域链 级别:0
var num2=20;
var str = "abc";
function f1() {
var num2=20;
function f2() {
var num3=30;
console.log(num);
}
f2();
}
f1();//103. Pre Resolution: before the browser is parsing code will function declarations and variable declarations in advance to the front of the scope.
//变量的提升
console.log(num);//100
var num=100;
//函数的声明被提前了
f1();//这个函数，执行了
function f1() {
console.log("这个函数,执行了");
}
var f2;
f2=function () {
console.log("好帅哦");
};
f2();//好帅哦- Closure
- Concepts: function A, a function B, function B can access the variables defined in the function A or the data at this time the closure is formed (this sentence temporarily stringency). If you want to cache data, the data is put in the middle position and function in a function of the outer layer.
- Role: the advantages of caching data is defective, there is no timely release.
- Local variables in the function, after the function using local variables will be automatically released. After closure, the use of local variables inside the scope chain will be extended.
- sandbox
Concept: environment is a black box, in a virtual simulation of real-world environment, experiment, experiment results and real-world result is the same, but will not affect the real world .. Snake on the case before used the sandbox.
Role: avoid naming conflicts.
(function () {
var str="小白喜欢小黑";
str=str.substr(2);
console.log(str);//喜欢小黑
}());
//沙箱
(function () {
var str="小明喜欢小红";
str=str.substr(2);
console.log(str);//喜欢小红
}());
var getTag = 10;
var dvObjs = 20;
var pObjs = 30;
//沙盒
(function () {
//根据标签名字获取元素
function getTag(tagName) {
return document.getElementsByTagName(tagName)
}
//获取所有的div
var dvObjs = getTag("div");
for (var i = 0; i < dvObjs.length; i++) {
dvObjs[i].style.border = "2px solid pink";
}
//获取所有的p
var pObjs = getTag("p");
for (var i = 0; i < pObjs.length; i++) {
pObjs[i].style.border = "2px solid pink";
}
}());
console.log(getTag);//10
console.log(dvObjs);//20
console.log(pObjs);//30
//沙盒里面的内容不影响外部环境- Recursion
- The concept: the function call the function yourself, this time is recursive, recursion conditions must be ended.
- example:
//求n个数字的和,5 计算1+2+3+4+5 var sum=0; for(var i=1;i<=5;i++){ sum+=i; } console.log(sum);//15 //递归实现:求n个数字的和 n=5---> 5+4+3+2+1 // 函数的声明 function getSum(x) { if(x==1){ return 1; } return x+getSum(x-1); } //函数的调用 console.log(getSum(5));//15//斐波那契数列 function getSeries(x) { if (x===1||x===2){ return 1; } else { return getSeries(x-1)+getSeries(x-2); } } console.log(getSeries(12));3. Perform the process:
代码执行getSum(5)--->进入函数,此时的x是5,执行的是5+getSum(4),此时代码等待 此时5+getSum(4),代码先不进行计算,先执行getSum(4),进入函数,执行的是4+getSum(3),等待, 先执行的是getSum(3),进入函数,执行3+getSum(2),等待,先执行getSum(2),进入函数,执行 2+getSum(1);等待, 先执行getSum(1),执行的是x==1的判断,return 1,所以, 此时getSum(1)的结果是1,开始向外走出去 2+getSum(1) 此时的结果是:2+1 执行: getSum(2)---->2+1 3+getSum(2) 此时的结果是3+2+1 4+getSum(3) 此时的结果是4+3+2+1 5+getSum(4) 此时的结果是5+4+3+2+1 结果:15
