理解Javascript的call、apply
call 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.
注意:该函数的语法与 apply() 方法的语法几乎完全相同,唯一的区别在于,apply()方法接受的是一个参数数组,而 call()方法接受的是一系列参数列表。
了解完这两个方法的概念后,我们来一步一步理解他们的应用.
改变方法内this的指向
我们先来看下面这个例子
var name = "编程的人"; var age = 1; var person = { name:"公众号:bianchengderen", age:20 } function say(){ console.log("我叫:"+this.name+",年龄:"+this.age) } say();// 我叫: 编程的人,年龄: 1 say.call(person);//年龄:20
这两种调用执行的方式不一样,他们的结果也不一样,不一样在于say方法里面的this指向了不同的对象,第一次执行指向的是window,而我们以call方式执行,将say方法里面的this指向了person对象.
这是不是有点冒充别人的感觉.那我们这样有什么作用了?当然自己可以多多想想,到底能做什么! 我们继续往下面走.
实现继承机制
继承,这是高级面向对象的一种特性,用call我们可以将JAVASCRIPT有这种特点.
在看下面这个例子之前,必须好好理解上面的例子.
function Person(){ this.name = "编程的人"; this.age = 20; } function Student(){ Person.call(this); this.school = "地球"; } var student = new Student(); //下面打印出来: 编程的人,20,地球 console.log(student.name,student.age,student.school);
在这个例子里,Student函数继承了Person的name和age属性,就是通过Person.call(this)来实现,理解上面的例子后,应该是不难理解的.所以Student即拥有了Person的特点,又有自己的个性,比如这个this.school.
在这里,我们没有涉及到加入参数的传递,是方便大家的理解,需要加入参数传递,大家可以敲代码试一试,看看效果怎么样!
我们就先讲这两个例子吧,之后再进行深入学习。
相关推荐
-
js中继承的几种用法总结(apply,call,prototype)
一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码 代码如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Person(na
-
JavaScript学习点滴 call、apply的区别
1.call call 方法 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象. 如果没有提供 thisObj 参数,那么 Global
-
js apply/call/caller/callee/bind使用方法与区别分析
一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对
-
JavaScript中的apply和call函数详解
第一次翻译技术文章,见笑了! 翻译原文: Function.apply and Function.call in JavaScript 第一段略. 每个JavaScript函数都会有很多附属的(attached)方法,包括toString().call()以及apply().听起来,你是否会感到奇怪,一个函数可能会有属于它自己的方法,但是记住,JavaScript中的每个函数都是一个对象.看一下 这篇文章 ,复习一下(refresher)JavaScript特性.你可能还想知道JavaScrip
-
JS面向对象、prototype、call()、apply()
一. 起因 那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^. prototype.js代码片段 复制代码 代码如下: var Class = { create: function() { return function() { this.initialize.apply(this , arguments); } } } // Class使用方法如下 var A = Class
-
JavaScript中的apply()方法和call()方法使用介绍
1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组.call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来. 例1: 复制代码 代码如下: window.firstName = "diz"; window.lastName = "song"; var myObjec
-
深入理解JavaScript中的call、apply、bind方法的区别
在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部 this 的指向,因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply.call apply:应用某一对象的一个方法,用另一个对象替换当前对象 call:调用一个对象的一个方法,以另一个对象替换当前对象 function pers
-
深入理解JavaScript单体内置对象
JavaScript中定义了两个单体内置对象:Global和Math. Global对象 Global对象是JavaScript中最特别的一个对象.不属于任何其他对象的属性和方法,最终都是它的属性和方法.实际上,没有全局变量或全局作用域,所有在全局作用域中定义的属性和函数,都是Global对象的属性. Global对象包含了一些有用的方法: 1.URI编码方法 Global对象的encodeURI()和encodeURIComponent()方法可以对URI进行编码,encodeURI()主要用
-
AJAX入门之深入理解JavaScript中的函数
概述 函数是进行模块化程序设计的基础,编写复杂的Ajax应用程序,必须对函数有更深入的了解.JavaScript中的函数不同于其他的语言,每个函数都是作为一个对象被维护和运行的.通过函数对象的性质,可以很方便的将一个函数赋值给一个变量或者将函数作为参数传递.在继续讲述之前,先看一下函数的使用语法: function func1(-){-}var func2=function(-){-};var func3=function func4(-){-};var func5=new Function()
-
理解Javascript的动态语言特性
Javascript是一种解释性语言,而并非编译性,它不能编译成二进制文件. 理解动态执行与闭包的概念 动态执行:javascript提供eval()函数,用于动态解释一段文本,并在当前上下文环境中执行. 首先我们需要理解的是eval()方法它有全局闭包和当前函数的闭包,比如如下代码,大家认为会输出什么呢? var i = 100; function myFunc() { var i = 'test'; eval('i = "hello."'); } myFunc(); alert(i
-
javascript中call,apply,bind函数用法示例
本文实例讲述了javascript中call,apply,bind函数用法.分享给大家供大家参考,具体如下: 一.call函数 a.call(b); 简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b) call()的用法:用在函数上面 var Dog=function(){ this.name="汪星人"; this.shout=function(){ alert(this.name); } }; var Cat=function(){ this.name=&qu
-
灵活的理解JavaScript中的this指向
this是JavaScript中的关键字之一,在编写程序的时候经常会用到,正确的理解和使用关键字this尤为重要.首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会出什么问题,但是实际上那样理解是不准确的,所以在你理解this的时候会有种琢磨不透的感觉),那么接下来我会深入的探讨这个问题.
-
理解JavaScript中的Proxy 与 Reflection API
一.创建 Proxy let target = {} let proxy = new Proxy(target, {}) proxy.name = "proxy" console.log(proxy.name) // proxy console.log(target.name) // proxy target.name = "target" console.log(proxy.name) // target console.log(target.name) // t
-
一文理解JavaScript装饰器模式
装饰器模式想必大家并不陌生:它允许向一个现有的对象添加新的功能,同时又不改变其结构,属于结构型模式,它是作为现有的类的一个包装. 这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,提供了额外的功能. 在 JS 中,装饰器(Decorator)是ES7中的一个新语法,它可以对类.方法.属性进行修饰,从而进行一些相关功能定制.它的写法与Java的注解(Annotation)非常相似,但是功能还是有很大区别. 代码示例: 不使用装饰器: const log
-
一文搞懂JavaScript中bind,apply,call的实现
目录 bind.call和apply的用法 bind call&apply 实现bind 实现call和apply 总结 bind.call和apply都是Function原型链上面的方法,因此不管是使用function声明的函数,还是箭头函数都可以直接调用.这三个函数在使用时都可以改变this指向,本文就带你看看如何实现bind.call和apply. bind.call和apply的用法 bind bind()方法可以被函数对象调用,并返回一个新创建的函数. 语法: function.bin
-
一文彻底理解JavaScript原型与原型链
目录 前言 new对函数做了什么? 原型和原型链 借用原型方法 实现构造函数之间的继承 方案一 方案二 class extends实现继承 结语 前言 JavaScript中有许多内置对象,如:Object, Math, Date等.我们通常会这样使用它们: // 创建一个JavaScript Date实例 const date = new Date(); // 调用getFullYear方法,返回日期对象对应的年份 date.getFullYear(); // 调用Date的now方法 //
随机推荐
- js判断iframe内的网页是否滚动到底部触发事件
- VBS.Runauto脚本病毒分析篇
- asp.net neatUpload 支持大文件上传组件
- Oracle表的分类以及相关参数的详解
- PHP date()函数警告: It is not safe to rely on the system解决方法
- Android编程实现XML解析与保存的三种方法详解
- 基于JavaScript实现的快速排序算法分析
- asp.net网站防恶意刷新的Cookies与Session解决方法
- C#简单查询SQLite数据库是否存在数据的方法
- 查看图片(前进后退)功能实现js代码
- JavaScript简单生成 N~M 之间随机数的方法
- 用javascript实现文本框和"选择"按扭之间的间距
- 使用python统计文件行数示例分享
- python模块之sys模块和序列化模块(实例讲解)
- python 写的一个爬虫程序源码
- python实现监控linux性能及进程消耗性能的方法
- C#静态构造函数用法实例分析
- C#实现实体类与字符串互相转换的方法
- 详解关于Android Studio中安装和gradle的一些坑
- 浅谈 Webpack 如何处理图片(开发、打包、优化)