<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        //第一个用途：函数上下文模式改变this的指向

        var age=19;

        function fun() {

            console.log(this.age);

        }

        var obj={

            age:26

        };

        fun.apply(obj);

        fun.call(obj)

        //总结：apply和call，第一个参数功能都是一样，都是可以改变this指向为第一个参数对象。

        //当传递对象为null的时候，为window调用

        //应用1:将参数用“-”拼接

        function fun2() {

            //arguments是一个伪装数组，不能调用join方法，通过apply转换替代对象来调用

            console.log(Array.prototype.join.apply(arguments, ["-"]));

            console.log(Array.prototype.join.call(arguments, "-"));

        }

        fun2(1,2,3,4);

        //应用4：借用构造函数实现继承

        function Persion() {

            this.name="张三";

            this.age=18;

        }

        function Student() {

            Persion.apply(this);

        }

        var stu=new Student();

        console.log(stu);

        //第二个用途：第二个到第N个参数的处理

        function fun1(name,work) {

            console.log("名字为"+name+"；年龄为"+this.age+"职业"+work);

        }

        var obj1={

            age:30

        };

        /*

        * apply和call第二个参数都是函数的参数

        * apply是传递的数组，执行的时候是将数组遍历然后作为参数传递。

        * call传递的是分开的参数

        * */

        fun1.apply(obj1,["张三","金融"]);

        fun1.call(obj1,"张三","金融");

        //应用2：apply的遍历

        window.onload=function () {

            var divs=document.querySelectorAll("div");

            var spans=document.querySelectorAll("span");

            var arr=[];

            arr.push.apply(arr,divs);

            arr.push.apply(arr,spans);

            for(var i=0;i<arr.length;i++){

                arr[i].style.backgroundColor="red";

            }

        }

        //应用3:求最大值

        var arr1=[3,6,1,78,23];

        console.log(Math.max.apply(null, arr1));

    </script>

    <style>

        div,span{

            display: inline-block;

            width: 50px;

            height: 50px;

            border: 1px solid pink;

        }

    </style>

</head>

<body>

<div></div>

<div></div>

<div></div>

<div></div>

<br>

<span></span>

<span></span>

<span></span>

<span></span>

</body>

</html>

js的apply和call的更多相关文章

  1. 原生JS中apply()方法的一个值得注意的用法

    今天在学习vue.js的render时,遇到需要重复构造多个同类型对象的问题,在这里发现原生JS中apply()方法的一个特殊的用法: var ary = Array.apply(null, { &q ...

  2. js中apply方法的使用

    js中apply方法的使用   1.对象的继承,一般的做法是复制:Object.extend prototype.js的实现方式是: Object.extend = function(destinat ...

  3. js中apply,call的用法

    最近一直在用 js 写游戏服务器,我也接触 js 时间不长,大学的时候用 js 做过一个 H3C 的 web的项目,然后在腾讯实习的时候用 js 写过一些奇怪的程序,自己也用 js 写过几个的网站.但 ...

  4. JS之apply,call,bind区别

    为了加深对基础知识的理解,今天再复习下js中的apply,call,bind的区别和用法.整理笔记的过程也是一个再次学习的过程. apply和call js中的调用apply和call方法可以改变某个 ...

  5. js call apply bind简单的理解

    相同点:JS中call与apply方法可以改变某个函数执行的上下文环境,也就是可以改变函数内this的指向.区别:call与apply方法的参数中,第一个参数都是指定的上下文环境或者指定的对象,而ca ...

  6. js的apply()与call()的区别

    1.各自对应的不同的语法: /*apply()方法*/ function.apply(thisObj[, argArray]) /*call()方法*/ function.call(thisObj[, ...

  7. JS中apply和call的区别和用法

    Javascript中有一个call和apply方法,其作用基本相同,但是它们也有略微不同的地方. JS手册中对call方法的解释是: call方法:调用一个对象的一个方法,以另一个对象替换当前对象. ...

  8. js中apply的用法(转)

    之一------(函数的劫持与对象的复制)关于对象的继承,一般的做法是用复制法: Object.extend见protpotype.js 的实现方法: Object.extend = function ...

  9. 关于JS call apply 对象、对象实例、prototype、Constructor、__proto__

    关于call与apply的理解容易让人凌乱,这里有个方法可供参考 tiger.call(fox,arg1,arg2...) tiger.apply(fox,[arg1,arg2...]) 理解为 fo ...

  10. JS中apply与call的用法

    JavaScript中有一个call和apply方法,其作用基本相同,但也有略微的区别. 先来看看JS手册中对call的解释: call 方法调用一个对象的一个方法,以另一个对象替换当前对象. cal ...

随机推荐

  1. Entity Framework 6.0 Tutorials（1）：Introduction

    以下系统文章为EF6.0知识的介绍,本章是第一篇 原文地址:http://www.entityframeworktutorial.net/entityframework6/introduction.a ...

  2. SVN常见问题及解决方式（一）

    1.每天早上上班要update SVN,每天下班要commit SVN.2.查看是谁动了我的代码,右键 tortoise 后查看 log 日志.3.文件被别人删除,在空白处右击,show log,可以 ...

  3. ZendStudio 代码调试

    F5.单步调试进入函数内部(单步进入)F6.单步调试不进入函数内部(跳过)F7.由函数内部返回到调用处(跳出) F8.一直执行到下一个断点Ctrl+F2:结束调试

  4. 20169219 使用Metaspoit攻击MS08-067实验报告

    MS08-067漏洞介绍 MS08-067漏洞的全称为"Windows Server服务RPC请求缓冲区溢出漏洞",如果用户在受影响的系统上收到特制的 RPC 请求,则该漏洞可能允 ...

  5. DELPHI 调用系统 ADO 配置窗体 提高软件易用性

    最近DELPHI好像不太景气哦,把自己的代码拿出来晒晒.高手别喷哦. 直接上代码 implementation uses AdoConEd; var  saveconnstr:string; proc ...

  6. OkHttp3的简单使用（一）

    一.导入 1)gradle方式: compile 'com.squareup.okhttp3:okhttp:3.8.0'(okhttp 最新版) compile 'com.squareup.okio: ...

  7. PostBack

    PostBack 字面意义 Post提交 Back回来. 提交回来. 1. AutoPostBack 服务器控件需要设置 AutoPostBack="true" 后才会提交服务器. ...

  8. Topshelf + Quartz2.5 创建基于windows服务

    1.创建一个定时调度Quartz类 using Quartz; using Quartz.Impl; using System; using System.Collections.Generic; u ...

  9. 手动给kvm虚机挂载lvm卷

    1.查看计算节点上虚机挂载的卷 [root@xgto01n010243186070 ~]# virsh domblklist instance- Target Source ------------- ...

  10. Mac php7本地安装mongodb扩展以适配使用mongo扩展的线上老代码

    从https://pecl.php.net/package/mongodb官网下载压缩包(不懂事的我下载了1.5.1版本) 解压安装包 tar -zxvf mongodb-1.5.1.tgz 进入解压 ...