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

        返回函数,要返回多个函数就用一个对象封装一下,

        立即执行函数+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;
 

函数的四种调用模式.上下文调用.call.apply的更多相关文章

  1. JS面向对象函数的四种调用模式

    函数的四种调用模式 概念 在 js 中,无论是函数, 还是方法, 还是事件, 还是构造器,...这些东西的本质都是函数 函数, 方法, 事件, 构造器,...只是所处的位置不同 这四种模式分别是 函数 ...

  2. JavaScript高级之函数的四种调用形式

    主要内容 分析函数的四种调用形式 弄清楚函数中this的意义 明确构造函对象的过程 学会使用上下文调用函数 了解函数的调用过程有助于深入学习与分析JavaScript代码. 本文是JavaScript ...

  3. JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法

    缓存 cache 作用就是将一些常用的数据存储起来 提升性能 cdn //-----------------分析解决递归斐波那契数列<script> //定义一个缓存数组,存储已经计算出来 ...

  4. JavaScript函数的四种存在形态

    函数的四种存在形态: 1.函数形态 2.方法形态 将函数赋值给某一个对象的成员,那么就称为方法 3.构造器形态 4.上下文形态   1.函数形态: var foo = function() { ale ...

  5. Android Activity 四种启动模式

    task和back stack(任务和回退栈) 任务启动,task被加入到回退栈的栈顶,返回的时候回退栈的栈顶任务会被弹出,并被销毁,栈中的前一任务恢复运行,当activity销毁是,系统不会保留ac ...

  6. Android中Activity的四种启动模式

    要了解Android的启动模式先要了解一下Activity的管理方式: 1.Activity的管理机制 Android的管理主要是通过Activity栈来进行的.当一个Activity启动时,系统根据 ...

  7. Activity的四种启动模式和onNewIntent()

    转自:http://blog.csdn.net/linghu_java/article/details/17266603 Android中Activity启动模式详解   在Android中每个界面都 ...

  8. C语言中返回字符串函数的四种实现方法 2015-05-17 15:00 23人阅读 评论(0) 收藏

    C语言中返回字符串函数的四种实现方法 分类: UNIX/LINUX C/C++ 2010-12-29 02:54 11954人阅读 评论(1) 收藏 举报 语言func存储 有四种方式: 1.使用堆空 ...

  9. 关于android的Activity的四种启动模式

    最近做项目遇到一个问题,当触摸屏幕的时候通过intent启动activity,发现会启动多次,而后查阅资料,发现,原来是activity的模式设置问题. Activity的启动模式可以通过Androi ...

随机推荐

  1. svn提交代码失败提示清理(清理失败并且报错信息乱码解决办法)

    原因是;svn的数据库队列原因 1,下载sqlite3.exe,  sqlite官网http://www.sqlite.org/download.html) 2.在Windows的D盘中新建tools ...

  2. php打包下载文件

    使用前请先开启:查看下php.ini里面的extension=php_zip.dll前面的分号有没有去掉; $zip=new \ZipArchive(); $zifile = 'download/' ...

  3. HTML-参考手册: HTML 语言代码

    ylbtech-HTML-参考手册: HTML 语言代码 1.返回顶部 1. HTML 语言代码 参考手册 ISO 语言代码 HTML 的 lang 属性可用于声明网页或部分网页的语言.这对搜索引擎和 ...

  4. sqlserver 找不到驱动,显示项目缺少class办法

    maven使用 <dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId> ...

  5. Backdoor CTF 2013 :电子取证250

    0x00题目 h4x0r厌烦了你对他的城堡的所有攻击,所以他决定报复攻击你,他给你发来一封带有图片的邮件作为警告,希望你能找出他的警告消息:-) 消息的MD5值就是flag. 图片如下: 0x01解题 ...

  6. angular 通过路由获取ID

    constructor( private dataService: TestListsService, private route: ActivatedRoute, ) { // 通过路由获取ID c ...

  7. jquery中attr方法和prop方法的区别

    关于checked的属性,最重要的概念就是你要记住,它跟checked的状态值是毫无关系的,设置checked = "checked"或者checked = "true& ...

  8. Python - 元组 , range

    元组和元组嵌套 元组: 俗称不可变的列表.又被成为只读列表, 元组也是python的基本数据类型之一, 用小括号括起来, 里面可以放任何数据类型的数据, 查询可以. 循环也可以. 切片也可以. 但就是 ...

  9. python-模块-包

    一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...

  10. LeetCode Array Medium 11. Container With Most Water

    Description Given n non-negative integers a1, a2, ..., an , where each represents a point at coordin ...