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). 为了帮助理解,让我 ...
随机推荐
- 【Oracle】管理还原数据(undo)
1. 查看undo相关参数 SYS@LGR> show parameter undo NAME TYPE VALUE ------------------------------------ - ...
- 如何用npm安装vue
下载安装node.js,安装完毕做好配置后开始运行. 如果npm版本太低,需要升级一下npm # 查看版本 $ npm -v #升级 npm cnpm install npm -g 安装vue-cli ...
- 转载:jquery 对 Json 的各种遍历
概述 JSON(javascript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式 ...
- 如何处理CSS3属性前缀(转载)总结
今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...
- php 常用header
//定义编码 header( 'Content-Type:text/html;charset=utf-8 '); //Atom header('Content-type: application/at ...
- 简述Web Service通讯技术的搭建流程
Web Service 基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级 ...
- Java Pattern Matcher 正则表达式需要转义的字符
见:http://blog.csdn.net/bbirdsky/article/details/45368709 /** * 转义正则特殊字符 ($()*+.[]?\^{},|) * * @param ...
- Android 开源项目android-open-project解析之(二) GridView,ImageView,ProgressBar,TextView
五.GridView StaggeredGridView 同意非对齐行的GridView,类似Pinterest的瀑布流.而且跟ListView一样自带View缓存,继承自ViewGroup 项目地址 ...
- NAT&Port Forwarding&Port Triggering
NAT Nat,网络地址转换协议.主要功能是实现局域网内的本地主机与外网通信. 在连接外网时,内部Ip地址须要转换为网关(一般为路由器Ip地址)(port号也须要对应的转换) ...
- HDU 5045 DP+状压
2014 ACM/ICPC Asia Regional Shanghai Online 给出N个人做M道题的正确率,每道题仅仅能由一个人做出,而且当全部人都做出来且仅做出一道题时,做过题的人才干够继续 ...