//上下文模式:根据用户传递的参数产生不同的结果
//实现方式:call/apply:这两个都是定义在Function.prototype.call——>目的:任何函数都可以访问到call/apply
//call方法的第一个参数表示(本次调用该函数,)函数内部的this的值
function fn(){
console.log(this.name);//张三
}
fn();//函数调用模式——>this指向window window自带一个name属性:""
fn.call({name:"张三"});
var o={};
fn.call(o);//本次调用,fn函数内部的this的值指向o对象
//——>打印结果:undefined(一个对象中访问不到某个属性的时候,值就是undefined) function foo(){
console.log(this.name);
return [1,3,5];
}
foo();//函数调用模式——>foo函数内部的this指向window,返回值由return决定
//window.name——>""
var f1=foo.call({name:"张三"});//上下文调用模式——>foo函数内部this指向传递的参数
//this.name——>"张三"
console.log(f1.__proto__);//返回值由return语句决定
//——>Array.prototype
var f2=new foo();//构造函数调用模式——>foo函数内部this指向构造函数的实例
//——>this.name:undefined
console.log(f2.__proto__);//——>Array.prototype
function fn(){
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//利用call方法来调用fn函数的时候,如果需要传递实参,将实参作为call方法的的第二个参数开始依次传递
fn.call(null,1,3,5);//call方法的第二个参数是fn方法的第一个实参,第三个参数是fn方法的第二个实参
fn.apply(null,[1,3,5]);//apply方法的第二个参数是一个数组对象,这个数组中第一个元素是fn的第一个实参,数组的第二个元素是fn的第二个实参。。。
//fn.apply(函数内部的this的值,[实参1,实参2。。。实参n])
//面试题:call/apply方法有什么异同?
//1、相同点:a、他们都是Function.prototype对象中定义的方法
// b、第一个参数都是表示函数内部的this的值
//2、不同点:如果需要给函数传递参数的时候,利用call方法,将函数的参数从第二个参数开始依次排开
// 利用apply方法,apply方法的第二个参数是一个数组对象,数组的第一个参数表示函数的第一个实参,依次以此类推 //数组里面的push方法实现的功能:往数组里面添加一个元素
var arr=[1,3,5];//{0:1,1:3,2:5,length:3}
arr.push(10);//{0:1,1:3,2:5,3:10,length:4}
//伪数组
var o={0:10,length:1};
// o[1]=20;
// o.length++;
// o[2]=30;
// o.length++;
// o[3]=50;
// o.length++;
//借用数组的push方法:首先需要访问到push方法
//使用场景1、借用数组的push方法往伪数组里面添加元素
[].push.call(o,10,30,50,70,80,100);
[].push.apply(o,[10,30,50,70,80,100]);
//使用场景2:借用数组的push方法往数组中添加多个元素(这多个元素在一个数组中)
var arr1=[1,3,5];
var arr2=[10,20,30];
//要将arr2中的元素依次添加到arr1中
// for (var i = 0; i < arr2.length; i++) {
// arr1.push(arr2[i]);
// }
//[].push.call(arr1,arr2);//——>往arr1中添加一个元素,该元素是一个数组
[].push.apply(arr1,arr2);//——>往arr1中添加了多个元素
//——>push方法内部通过隐式迭代的方式添加多个元素 /借用构造函数实现继承:需要2个构造函数
function Person(name,age){
this.name=name;
this.age=age;
}
// function Student(name,age,number){
// this.name=name;
// this.age=age;
// this.number=number;
// }
function Student(name,age,number){
//借用构造函数实现继承
Person.call(this,name,age);
this.number=number;
}
var s1=new Student("张三",20,666);
//借用构造函数实现继承:子类构造函数(Student)借用父类构造函数(Person)来完成:给子类的实例添加属性
//注意条件:由于要借用父类构造函数,所以父类构造函数的功能要对子类对象通用

  

javascript中call(),apply()用法的更多相关文章

  1. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  2. JavaScript中this的用法 及 如何改变this的指向

    要懂得JavaScript中this的用法,首先需要知道,JavaScript中的作用域相关知识. var fun = function(){ var flag = 1; console.log(fl ...

  3. 从函数调用的角度,探讨JavaScript中this的用法

    js函数调用方式大概可分为:函数调用,构造器调用,call或apply,方法调用四种方式.下面结合一些基础概念和实测代码,从函数调用的角度,探讨JavaScript中this的用法. 1. new对函 ...

  4. JavaScript中return的用法详解

    JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...

  5. javascript中 try catch用法

    javascript中 try catch用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-08-16我要评论 JS try catch语句一般在什么情况下使用?是必须使 ...

  6. JavaScript中this的用法详解

    JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...

  7. 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”

    JavaScript中的setInterval用法(资料来源:博主---八神吻你   ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...

  8. javascript中的继承用法

    本文实例汇总了javascript关于继承的用法,希望本文所述对大家的javascript程序设计有所帮助.分享给大家供大家参考.具体如下:代码如下: /** * 实现子类继承父类,但不会产生多余的属 ...

  9. javascript中的apply,call,bind详解

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

随机推荐

  1. Chrome打开标签页预览

    类似于Microsoft Edge浏览器上的标签页缩略图预览非常方便,其实现在谷歌浏览器正在测试相关的功能,如果想提前体验,就在地址栏输入"chrome://flags"并按下回车 ...

  2. mybatis插件机制及分页插件原理

    MyBatis 插件原理与自定义插件: MyBatis 通过提供插件机制,让我们可以根据自己的需要去增强MyBatis 的功能.需要注意的是,如果没有完全理解MyBatis 的运行原理和插件的工作方式 ...

  3. mysql 5.7 创建函数报错,This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled (you *might* want to use the less safe log_bin_trust_function_creat

    今天用命令创建函数, 报错 This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration ...

  4. 16、NumPy ——字节交换

    NumPy 字节交换 在几乎所有的机器上,多字节对象都被存储为连续的字节序列.字节顺序,是跨越多字节的程序对象的存储规则. 大端模式:指数据的高字节保存在内存的低地址中,而数据的低字节保存在内存的高地 ...

  5. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  6. CodeChef Mahesh and his lost array

    Mahesh and his lost array   Problem code: ANUMLA   Submit All Submissions   All submissions for this ...

  7. 2. ZooKeeper基础

    1. ZooKeeper的特性 ZooKeeper的特性主要从会话.数据节点,版本,Watcher,ACL权限控制,集群角色这些部分来了解,其中需要重点掌握的数据节点与Watcher 1.1 会话 客 ...

  8. vue,一路走来(5)--微信登录

    微信登录 今天又是周末了,想着博客还没记录完成.是的,下面记录一下微信登录遇到的问题. 在我的项目中,个人中心是需要完成授权登录才可以访问的,首先在定义路由的时候就需要多添加一个自定义字段requir ...

  9. IDS4授权分析

    一.授权过程的场景名词 RO (resource owner): 资源所有者:用户. Resource Owner:简单理解为资源拥有者,文中称“user”: RS (resource server) ...

  10. Shell06--数组应用

    目录 Shell06---数组应用 1. 数组基本概述 2. 数组基本使用 3. 数组遍历与循环 Shell06---数组应用 1. 数组基本概述 01. 什么是数组? 数组其实也算是变量,传统的变量 ...