zoukankan      html  css  js  c++  java
  • 函数的四种调用模式.上下文调用.call.apply

    闭包:函数就是一个闭包,一个封闭的作用域;

            返回函数,要返回多个函数就用一个对象封装一下,
            立即执行函数+return
    回调函数
     
    JS动态创建的DOM,不会被搜索引擎抓取,对SEO不友好.
    1. /*window的name属性*/
    2. function fn(){
    3. console.log(this.name);
    4. }
    5. fn.call({name:"zhangsan"});//"zhangsan"
    6. console.log();
    7. fn();//'' 打印空字符串,此时调用fn其中的的this指的是window对象,
    8. //window对象具有name属性,值是一个空字符串
    1. //函数的四种调用模式
    2. //上下文模式 call apply 借用的概念
    3. function foo(){
    4. }
    5. //当foo函数声明好了后无法确定foo函数的身份,只有在调用的时候
    6. //才能确定foo的所属;根据foo函数的执行情况和返回结果
    7. //js中函数由四种不同的调用方式,其中this的指向,返回值由return决定(构造函数特殊)
    8. //1.函数调用模式
    9. foo();//本质就是使用window对象,调用;指向window
    10. //2.方法调用模式,把函数当做对象的方法;this指向obj
    11. var obj ={
    12. fn:function(){
    13. }
    14. };
    15. obj.fn();
    16. obj['fn']();
    17. //3构造函数调用 将函数当成构造函数来调用(new);this指向构造函数的实例
    18. functionFoot(){}
    19. newFoot();
    20. //构造函数没有return语句,返回的是构造函数的实例
    21. //有return,return的内容是一个对象,返回值是return语句的对象;如果return的是基本数据类型,那返回值
    22. //还是实例
    23. functionFoot2(){
    24. return[1,2,3];
    25. }
    26. var foot2=newFoot2();
    27. console.log(foot2.__proto__);//Array.prototype ?Array[0]
    28. //4.上下文调用模式,根据用户传递的参数产生不同的结果 .this的值由调用者决定;
    29. //call/apply 这两个方法都是定义在Function.prototype中的方法,这样任何函数都能访问到这两个方法
    30. //调用模式,只有函数才能调用
    31. function fn(){
    32. console.log(this.name);
    33. }
    34. console.log(fn.call()===Function.prototype.call());//true
    35. fn.call({name:"zhangsan"});//zhangsan
    36. //call方法的第一个参数指的是本次调用该函数内部this的值
    37. fn();//此时this指向window window有一个name属性是"" 空字符串.
    1. function foo(){
    2. console.log(this.name);
    3. return[1,2,3];
    4. }
    5. foo();//""
    6. var f1=foo.call({name:"张三"});//"张三"
    7. console.log(f1.__proto__);//上下文模式return返回值由return决定,返回值是一个数组对象 //Array.prototype
    8. var f2=new foo();//undefined
    9. console.log(f2.__proto__);//Array.prototype
     
    1. /*call方法*/
    2.    /*以下方法使用apply使用时相同的*/
    3. function foo(){
    4. console.log(this.age);
    5. }
    6. var obj={age:18};
    7. foo.call(obj);//18 其中的this指的是obj
    8. foo.call(null);//foo函数中的this指向window
    9. //call方法的第一个参数还可以是数字,字符串,布尔值这些基本的数据类型
    10. foo.call(3);//number 数字3转化为对应的基本包装类型Number类型
    1. /*call方法*/
    2. function foo(){
    3. console.log(this.age);
    4. }
    5. var obj ={age:18};
    6. foo.call(obj);//18 其中的this指的是obj
    7. foo.call(null);//foo函数中的this指向window
    8. //call方法的第一个参数还可以是数字,字符串,布尔值这些基本的数据类型
    9. foo.call(3);//number 数字3转化为对应的基本包装类型Number类型
    10. /*call有实参的情况*/
    11. function fn(){
    12. //传递的参数在函数内部使用arguments获取
    13. for(var i =0; i < arguments.length; i++){
    14. console.log(arguments[i]);
    15. }
    16. }
    17. //使用call方法来调用fn函数的时候,如果需要传递实参,将实参作为call方法的第二个参数开始依次传递
    18. fn.call(null,1,2,3,4)
    19. /*apply有实参的情况*/
    20. function fun(){
    21. for(var i=0;i<arguments.length;i++){
    22. console.log(arguments[i]);
    23. }
    24. }
    25. //使用apply方法来调用fun函数的时候,第二个参数是一个数组对象
    26. fun.apply(null,[1,3,5]);
    27. //第一个参数:函数内部this的值
    28. //[实参1,实参2,实参3]
    29. // call/aply的异同点
    30. //相同点:他们都是Function.prototype对象中定义的方法
    31. //第一个参数都表示函数内部的this的值
    32. //不同点:在传参的时候,如果给函数传参的时候利用call方法,
    33. // apply传递的是数组.call传递的是用逗号分隔的一个一个的参数
     
    1. /*上下文模式借用内置方法*/
    2. //数组里面的push方法实现的功能,向数组里面添加一个元素
    3. //1.借用push方法,向伪数组中添加元素;[].push Array.prototype
    4. //伪数组是没有push方法的,首先我们要能访问到push方法
    5. var arr={1:10,2:28};
    6. [].push.call(arr,10,20,30);
    7. console.log(arr);
    8. //jQuery对象也是伪数组
    9. //向数组中添加元素的方法
    10. //push
    11. //arr[arr.length]
    12. //2.借用数组的push方法向数组中添加元素
    13. var arr1 =[];
    14. var arr2=[10,120,10,20];
    15. //需求 将arr2中的元素添加到arr1中
    16. [].push.apply(arr1,arr2);//apply方法
    17. for(var i=0;i<arr2.length;i++){//之前的方法
    18. arr1.push(arr2[i]);
    19. }
     
     
    1. //数组的方法经常被伪数组所借用
    2. //1.需求 将一个伪数组转化为真数组:slice
    3. var arr=[13,12,12,34];
    4. arr.slice(1);//从索引1开始截取,到最后一个元素[12,12,34]
    5. var obj ={0:"范明",1:"小沈阳",length:2};
    6. [].slice.call(obj);//返回的是一个数组["范明","小沈阳"];
    7. [].slice.call(obj,1);//返回的是一个数组["小沈阳"];
    8. //2.删除伪数组里面的元素
    9. var obj2 ={0:"范明",1:"小沈阳",2:"沈阳",length:2};
    10. //删除数组中的第第三个元素,参数从第几个开始删,删除几个
    11. var newObj=[].splice.call(obj2,1,1);
    12. console.log(newObj);//["小沈阳"]
    13. console.log(obj2);//Object {0: "范明", 2: "沈阳", length: 1}
    14. [].splice.call(obj2,2,1,200,300);//从第三个参数开始是添加的元素
     
    1. //3.借用构造函数实现继承
    2. functionPerson(name,age){//父类构造函数
    3. this.name=name;
    4. this.age=age;
    5. }
    6. // function Student(name,age,number){
    7. // this.age=age;
    8. // this.name=name;
    9. // this.number=number;
    10. // }
    11. //优化
    12. functionStudent(age,name,number){//子类构造函数
    13. Person.call(this,name,age);//给构造函数的实例,添加name,age两个属性
    14. //this代表Student的实例
    15. //Student构造函数借用Person构造函数
    16. this.number=number;
    17. }
    18. var stu =newStudent(18,"zhangsan",12);
    19. console.log(stu);
    20. //注意条件:父类构造函属性要对子类对象通用
    1. /*jQuery大结构原理 init*/  
    2. function jQuery(){
    3. //init是一个构造函数,用于创建jQuery对象,并返回这个对象
    4. returnnew jQuery.prototype.init();
    5. }
    6. jQuery.prototype={
    7. constructor:jQuery,
    8. init:function(){
    9. returnthis;
    10. },
    11. css:function(){}
    12. };
    13. //init的原型指向jQuery的原型,这样init创建的对象就可以使用jQuery原型中的方法了
    14. jQuery.prototype.init.prototype=jQuery.prototype;
     





  • 相关阅读:
    (转)RSS在.net下面的调用以及使用
    WEB打印的一些资料,做项目的时候用到转来(转)
    asp.net编码技巧汇集(转)也有自己的一些
    ASP.NET 中 DataGrid 导出到 Excel 的封装实现 (转)
    (转)上传与下载需要考虑的
    正则表达式之全部符号解释(转)
    开发过程遇到的无法打包问题的解决!
    传入参数,导出dbf以及删除dbf的sql 存储过程
    (转贴)MDSN关于.net连接池的讨论
    一个SessionInterPagesHelper类 (转)挺不错的想法
  • 原文地址:https://www.cnblogs.com/itlyh/p/6012095.html
Copyright © 2011-2022 走看看