js-apply call bind 浅析
call
1.第一个参数指定了this,第二个参数传给this,也就是call前面的函数,作为他的参数第三个参数也一样
指定了this,就是执行环境,greet的this在i里面找
function greet() {
var reply = [this.person, 'Is An Awesome', this.role].join(' ');
console.log(reply);
} var i = {
person: 'Douglas Crockford', role: 'Javascript Developer'
}; greet.call(i); // Douglas Crockford Is An Awesome Javascript Developer
第二个参数传给this,也就是call前面的函数,也就是函数继承,知乎大佬这莫说
猫吃鱼,狗吃肉,奥特曼打小怪兽。
有天狗想吃鱼了
猫.吃鱼.call(狗,鱼)
狗就吃到鱼了
猫成精了,想打怪兽
奥特曼.打小怪兽.call(猫,小怪兽)
function Product(name, price) {
this.name = name;
this.price = price;
} function Food(name, price) {
Product.call(this, name, price);
this.category = 'food';
} //等同于
function Food(name, price) {
this.name = name;
this.price = price;
if (price < 0) {
throw RangeError(
'Cannot create product ' + this.name + ' with a negative price'
);
} this.category = 'food';
} //function Toy 同上
function Toy(name, price) {
Product.call(this, name, price);
this.category = 'toy';
} var cheese = new Food('feta', 5);
var fun = new Toy('robot', 40);
2.使用call
方法调用匿名函数
1.写一个匿名函数
2.给数组中每一个元素作为this去执行这个匿名函数,就是this在animals[i]里面找,并把i传里面
3.因为是匿名函数,没有函数名,所以有this.print()
var animals = [
{species: 'Lion', name: 'King'},
{species: 'Whale', name: 'Fail'}
]; for (var i = 0; i < animals.length; i++) {
(function (i) {
this.print = function () {
console.log('#' + i + ' ' + this.species + ': ' + this.name);
}
this.print();
}).call(animals[i], i);
}
2.call 和 apply 一模一样几乎
区别只在于传递参数的方式
console.log.apply(console, [1, 2, 3, 4])
console.log.call(console, 1, 2, 3, 4)
}
3.bind最大用途在于指定this的值,第二个参数是提前给他穿进去了这个参数
function list() {
return Array.prototype.slice.call(arguments);//把arguments变成数组,再使用数组才有的slice方法
} var list1 = list(1, 2, 3); // [1, 2, 3] // Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37); var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]
js-apply call bind 浅析的更多相关文章
- this,call,apply,bind浅析
在JS中,this指向是一个难点,在本文中讲解几种常见的this指向问题,并介绍一下call,apply,bind这三个函数的用法. 一.常见的this指向情况 首先要明白一点就是,函数里面才会有th ...
- js apply() call() bind() 的使用
bind ,call,apply 这三者都是用来改变函数的this对象的指向的. call和apply其实是同一个东西,区别只有参数不同. 其实call和apply ,只要你调用调用一个函数的时候就可 ...
- JS核心系列:浅谈 call apply 与 bind
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
- js里function的apply vs. bind vs. call
js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...
- JS之apply,call,bind区别
为了加深对基础知识的理解,今天再复习下js中的apply,call,bind的区别和用法.整理笔记的过程也是一个再次学习的过程. apply和call js中的调用apply和call方法可以改变某个 ...
- JS中的call、apply、bind方法
JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]] ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- 理解JS中的call、apply、bind方法(*****************************************************************)
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题
1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...
随机推荐
- Poj Maya Calendar
http://poj.org/problem?id=1008 Maya Calendar Time Limit: 1000MS Memory Limit: 10000K Total Submissio ...
- Python框架、库和软件资源大全(整理篇)
有少量修改,请访问原始链接.PythonWIn的exe安装包;http://www.lfd.uci.edu/~gohlke/pythonlibs/ 原文链接:codecloud.net/python- ...
- RabbitMQ学习之集群模式
由于RabbitMQ是用erlang开发的,RabbitMQ完全依赖Erlang的Cluster,因为erlang天生就是一门分布式语言,集群非常方便,但其本身并不支持负载均衡.Erlang的集群中各 ...
- bzoj4282 慎二的随机数列 树状数组求LIS + 构造
首先,我们不难发现N个位置都选一定不会比少选任意几个差,所以我们就先设定我们将这N个修改机会都用上, 那么如果点 i">ii 前有sumv">sumvsumv个可修改点 ...
- 执行目标文件引发的问题:syntax error: word unexpected (expe...
今天不小心把一个目标文件当成了可执行文件放到开发板上进行执行,结果出现了这样一个问题:./hello_qt: line 1: syntax error: word unexpected (expect ...
- SSM知识巩固
------------------------- 绑定页面提交的多个数据 绑定数组 --------------------------------------- 绑定list(需求:批量修改商品 ...
- Elasticsearch 7.0 正式发布,盘他!
Elastic{ON}北京分享了Elasticsearch7.0在Speed,Scale,Relevance等方面的很多新特性. 比快更快,有传说中的那么牛逼吗?盘他! 通过本文,你能了解到: Ela ...
- BA-siemens-desigo_cc安装
1.首先安装NT3.5和NT4.0软件 2.按照以下网址的教程配置好IIS和WEBDAV环境:http://www.cnblogs.com/xiongzai/p/4126493.html 文章写的真不 ...
- 洛谷 1775. [国家集训队2010]小Z的袜子
1775. [国家集训队2010]小Z的袜子 ★★★ 输入文件:hose.in 输出文件:hose.out 简单对比时间限制:1 s 内存限制:512 MB [题目描述] 作为一个生活 ...
- servlet详细理解
生命周期 编辑 客户端请求该 Servlet: 加载 Servlet 类到内存: 实例化并调用init()方法初始化该 Servlet: service()(根据请求方法不同调用doGet() 或者 ...