bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个
参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入
作为它的参数。(来自于 MDN )
bind 功能:
1 返回一个函数
2 可以传入参数
关于指定 this 的指向,我们可以使用 call 或者 apply 实现
但是在这个写法中,我们直接将 fBound.prototype = this.prototype,我们
直接修改 fBound.prototype 的时候,也会直接修改绑定函数的 prototype。
这个时候,我们可以通过一个空函数来进行中转
测试
~~~
var value = 2;
var foo = {
value: 1
};
function bar(name, age) {
this.habit = 'shopping';
console.log(this.value);
console.log(name);
console.log(age);
}
bar.prototype.friend = 'kevin';
var bindFoo = bar.bind2(foo, 'daisy');
var obj = new bindFoo('18');
// undefined
// daisy
// 18
console.log(obj.habit);
console.log(obj.friend);
// shopping
// kevin
~~~
实现代码
~~~
Function.prototype.bind2 = function(context) {
var that = this;
var args = Array.prototype.slice.call(arguments,1);
var fn = function(){}
var result = function() {
var bindArgs = Array.prototype.slice.call(arguments);
that.apply(this instanceof result ? this : context,args.concat(bindArgs));
}
fn.prototype = this.prototype;
result.prototype = Fn.prototype;
return result;
}
~~~
- 笔记内容来源
- 你不知道的JavaScript上
- vue
- 环境搭建
- node和npm安装配置
- 安装vue-cli并初始化vue项目
- 安装配置elementUI
- vuex安装配置
- axios安装配置
- main.js
- vue基础入门
- vue-router介绍
- vuex
- vue 原理学习源码学习
- js正则处理v-bind和语法
- 双向绑定
- 虚拟dom
- mvvm和render函数
- vue工作项目笔记
- elementUI 表格分页多选记忆功能
- elementUI表格展开一行
- keepAlive
- vue整合ckeditor5
- this.$router.push 内打开新窗口
- java修改上传图片的权限
- 兼容ie11
- 生成二维码
- base64图片下载(兼容IE10)
- vue新手引导程序intro.js
- vue插件 devtools
- vue刷新当前页面
- vue 锚点导航
- axios
- axios与springmvc
- vue-cli 3搭建vue
- git
- git常用命令
- 正则表达式
- 实例demo
- 1
- 新手引导页
- 纯css3从左显示下划线动画导航菜单
- 纯css3从中间显示下划线动画导航菜单
- css显示密码
- 倒计时时钟
- 星星评分
- 按钮悬停效果
- 步骤条
- css动画按钮
- input标题获得焦点上移
- css图片放大
- css镜像导航栏
- js
- 通信
- for in 和 for of
- 前端安全问题
- Promise
- 掘金冴羽学习笔记
- 模拟call
- 模拟bind
- 闭包
- 1 作用域
- 2 执行上下文栈
- 3 变量对象
- 4 作用域链
- 5 this
- 面向对象
- 基础知识点
- 渲染机制
- 其他
- 判断是否为数组
- http
- css
- 基础知识
- css阴影