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 浅析的更多相关文章

  1. this,call,apply,bind浅析

    在JS中,this指向是一个难点,在本文中讲解几种常见的this指向问题,并介绍一下call,apply,bind这三个函数的用法. 一.常见的this指向情况 首先要明白一点就是,函数里面才会有th ...

  2. js apply() call() bind() 的使用

    bind ,call,apply 这三者都是用来改变函数的this对象的指向的. call和apply其实是同一个东西,区别只有参数不同. 其实call和apply ,只要你调用调用一个函数的时候就可 ...

  3. JS核心系列:浅谈 call apply 与 bind

    在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...

  4. js里function的apply vs. bind vs. call

    js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...

  5. JS之apply,call,bind区别

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

  6. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

  7. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  8. 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...

  9. 理解JS中的call、apply、bind方法(*****************************************************************)

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  10. 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题

    1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...

随机推荐

  1. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  2. jquery mobile动态加载数据后无法渲染

    引自:http://blog.sina.com.cn/s/blog_025270e901016lst.html jquery mobile在动态添加html之后无法渲染控件,无法转换控件的办法! jq ...

  3. 【Oracle】查询当前SCN

    介绍两种方式: 一.sys用户下: select current_scn from v$database; select dbms_flashback.get_system_change_number ...

  4. 【转载】Java实现word转pdf

    最近遇到一个项目需要把word转成pdf,GOOGLE了一下网上的方案有很多,比如虚拟打印.给word装扩展插件等,这些方案都依赖于ms word程序,在java代码中也得使用诸如jacob或jcom ...

  5. 前端开发app

    1.如果是 Angular 那就选 Ionic (一对好 CP) 2.如果是 Vue 那就选 Vux (基于 WeUI)3.如果是 jQuery 那就选 Framework7 (iOS 和 Andro ...

  6. Debian 6 , 十个串口为什么只识别到了 6个 剩下4 个被禁止了

    0.946441] Serial: 8250/16550 driver, 6 ports, IRQ sharing enabled [    0.946533] serial8250: ttyS0 a ...

  7. VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址

    转载地址: https://blog.csdn.net/gebitan505/article/details/58166055 VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址 前 ...

  8. nyoj125-盗梦空间

    盗梦空间 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 <盗梦空间>是一部精彩的影片,在这部电影里,Cobb等人可以进入梦境之中,梦境里的时间会比现实中的时 ...

  9. Web项目部署(Flask Angular2 Nginx)

    独立弄了一个项目,也是锻炼自己的工程能力,使用了比较常用的框架,后端Flask,前端Angular2,采用前后端完全分离的方式,通过接口传输json,但是在具体部署过程中,查找资料较为零散,故整理如下 ...

  10. 免费ftp服务器FileZilla Server配置

    FileZilla Server下载安装完成后,必须启动软件进行设置,由于此软件是英文,本来就是一款陌生的软件,再加上英文,配置难度可想而知,小编从网上找到一篇非常详细的教程进行整理了一番,确保读到这 ...