this、new、call、apply、bind

news/2024/7/19 16:31:44 标签: js

this、call、apply、bind

this的指向问题

在ES5中，this的指向始终坚持一个原理：this永远指向最后调用它的那个对象，注意是在ES5中。

Case1:

    var name = "windowsName";
    function a() {
        var name = "Cherry";

        console.log(this.name);          // windowsName

        console.log("inner:" + this);    // inner: Window
    }
    a();
    console.log("outer:" + this)         // outer: Window

因为根据刚刚的那句话“this 永远指向最后调用它的那个对象”，我们看最后调用 a的地方 a();，前面没有调用的对象那么就是全局对象 window，这就相当于是 window.a()；注意，这里我们没有使用严格模式，如果使用严格模式的话，全局对象就是 undefined，那么就会报错 Uncaught TypeError: Cannot read property 'name' of undefined。

Case2：

var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name);      // Cherry
    }
}
a.fn();

在这个例子中，函数 fn 是对象 a 调用的，所以打印的值就是 a 中的 name 的值。

Case3：

var name = "windowsName";
var a = {
    // name: "Cherry",
    fn : function () {
        console.log(this.name);      // undefined
    }
}
window.a.fn();

这里为什么会打印 undefined 呢？这是因为正如刚刚所描述的那样，调用 fn 的是 a 对象，也就是说 fn 的内部的 this 是对象 a，而对象 a 中并没有对 name 进行定义，所以 log 的 this.name 的值是 undefined。

this指向总结: 在 es5 中，永远是this 永远指向最后调用它的那个对象。

ES6中的箭头函数可以避免 ES5 中使用 this 的坑。箭头函数的 this 始终指向函数定义时的 this，而非执行时。箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

Case1：
var name = “windowsName”;

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        },100);
    }

};

a.func2()     // this.func1 is not a function

在不使用箭头函数的情况下，是会报错的，因为最后调用 setTimeout 的对象是 window，但是在 window 中并没有func1 函数。

Case2：

var name = "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout( () => {
            this.func1()
        },100);
    }

};

a.func2()     // Cherry

“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的this

new关键字

var a = new myFunction('wuhuiluo','123')

new的过程(伪代码表示):

new MyFunction() {
	var obj = {}
	obj.__proto__ === obj.prototype
	var result = myFunction.call(obj,'wuhuiluo','123')
	return typeof result === 'object' ? result : obj
}
  1. 创建一个空对象obj
  2. 将新创建的空对象的隐式原型指向其构造函数的显示原型
  3. 使用call改变this指向
  4. 如果无返回值或者返回一个非对象值，则将obj返回作为新对象，如果返回值是一个新对象的话直接返回该对象

在new的过程中，我们使用call改变了this的指向。

call

Function.prototype.call(thisArg,arg1,arg2...)*

参数

thisArg:

必选希望this所指向的对象，如果设置为null或者undefined就指向全局对象window

arg1,arg2...:

可选,直顶的参数列表项

返回值:

使用调用者提供的this 值和参数调用该函数的返回值。若该方法没有返回值，则返回 undefined。

apply

Function。prototype.apply(thisArg,[argsArray])

与call不同的是apply的第二个参数只能是数组，里面包含需要传递的全部参数

bind

Function.prototype.bind(thisArg,arg1,arg2...)

参数与call相同

原声JS实现call、bind、apply方法

实现call方法

思路：

  1. 根据call的规则设置上下文对象,也就是this的指向。
  2. 通过设置context的属性,将函数的this指向隐式绑定到context上
  3. 通过隐式绑定执行函数并传递参数。
  4. 删除临时属性，返回函数执行结果
Function.prototype.myCall = function (context) {
    if (context === null || context === undefined) {
       // 指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中为window)
        context = window 
    } else {
        context = Object(context) // 值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的实例对象
    }
    const args = [...arguments].slice(1) // 将类数组转换为数组ES6
    const key = Symbol('特殊属性Symbol') // 用于临时储存函数
    context[key] = this; // 函数的this指向隐式绑定到context上
    let result = context[specialPrototype](...args); // 通过隐式绑定执行函数并传递参数
    delete context[key]; // 删除上下文对象的属性
    return result; // 返回函数执行结果
};

实现apply方法

思路：

  1. 传递给函数的参数处理不太一样，其他部分与call一样
  2. apply接受的第二个参数为类数组对象
Function.prototype.myApply = function (context) {
   if (context === null || context === undefined) {
       context = window // 指定为 null 和 undefined 的 this 值会自动指向全局对象(浏览器中为window)
   } else {
       context = Object(context) // 值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的实例对象
   }
   // JavaScript权威指南判断是否为类数组对象
   function isArrayLike(o) {
       if (o &&                                    // o不是null、undefined等
           typeof o === 'object' &&                // o是对象
           isFinite(o.length) &&                   // o.length是有限数值
           o.length >= 0 &&                        // o.length为非负值
           o.length === Math.floor(o.length) &&    // o.length是整数
           o.length < 4294967296)                  // o.length < 2^32
           return true
       else
           return false
   }
   const key = Symbol('特殊属性Symbol') // 用于临时储存函数
   context[key] = this; // 隐式绑定this指向到context上
   let args = arguments[1]; // 获取参数数组
   let result
   // 处理传进来的第二个参数
   if (args) {
       // 是否传递第二个参数
       if (!Array.isArray(args) && !isArrayLike(args)) {
           throw new TypeError('myApply 第二个参数不为数组并且不为类数组对象抛出错误');
       } else {
           args = Array.from(args) // 转为数组
           result = context[key](...args); // 执行函数并展开数组，传递函数参数
       }
   } else {
       result = context[key](); // 执行函数 
   }
   delete context[key]; // 删除上下文对象的属性
   return result; // 返回函数执行结果
};

实现apply方法

思路：

  1. 拷贝源函数
  2. 返回拷贝的函数
  3. 调用拷贝的函数
Function.prototype.myBind = function (objThis, ...params) {
    const thisFn = this; // 存储源函数以及上方的params(函数参数)
    // 对返回的函数 secondParams 二次传参
    let fToBind = function (...secondParams) {
        const isNew = this instanceof fToBind // this是否是fToBind的实例 也就是返回的fToBind是否通过new调用
        const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上
        return thisFn.call(context, ...params, ...secondParams); // 用call调用源函数绑定this的指向并传递参数,返回执行结果
    };
    if (thisFn.prototype) {
        // 复制源函数的prototype给fToBind 一些情况下函数没有prototype，比如箭头函数
        fToBind.prototype = Object.create(thisFn.prototype);
    }
    return fToBind; // 返回拷贝的函数
};

call、apply、bind方法的区别与总结

  1. call和apply唯一的区别就是参数传递方式的不同，call传递是参数列表，apply传递的是数组
  2. call与apply都是更改this指向后直接调用，而bind是返回相应的函数，之后才会调用
  3. 如果期望生成一个新的函数，并且长期绑定某些方法，就可以使用bind
  4. fn.apply不会立即调用，而是返回一个绑定后的新函数

应用场景

  1. 需要立即调用使用call/apply
  2. 需要传递的参数不多，则可以使用fn.call(thisObj,args1,args2…)
  3. 需要传递的参数很多，则可以使用数组将参数整理好后调用fn.apply(thisObj,[args1,args2…])
  4. 不需要立即执行，而是想生成一个新的函数长期绑定某个函数给某个对象使用，可以使用const newFn = fn.bind(thisObj) newFn(arg1,arg2…)

http://www.niftyadmin.cn/n/1542359.html

相关文章

js 所有数组方法

js 所有数组方法

序 方法名称 使用说明 1 concat(数组1,数组2,...,数组N) 将多个数组结合成一个新的数组 2 join(分隔字符) 将数组结合成一个字符串&#xff0c;用特定字符来分开 3 pop() 将数组内最后一个组件删除&#xff0c;并返回该组件内容 4 push(组件1,组件2,...,组件N) 将一个或多个…
阅读更多...
Android Camera解析（上） 调用系统相机拍摄照片

Android Camera解析（上） 调用系统相机拍摄照片

开发中我们常须要通过相机获取照片&#xff08;拍照上传等&#xff09;。一般通过调用系统提供的相机应用就可以满足需求&#xff1b;有一些复杂需求还须要我们自己定义相机相关属性&#xff0c;下篇我们会涉及到。首先我们来研究怎样简单调用系统相机应用来获取照片 GitHub地址…
阅读更多...
安全管道工具SSF

安全管道工具SSF

安全管道工具SSFSSF&#xff08;Secure Socket Funneling&#xff09;是一款安全网络通信工具。它可以将多个管道的数据通过一个TLS连接转发给远程计算机&#xff0c;从而实现数据的安全传输。它不仅支持TCP数据转发&#xff0c;还支持UDP的数据转发。同时&#xff0c;它支持端…
阅读更多...
var、let、const

var、let、const

var let const const 在声明变量时必须初始化(声明变量的同时并赋值即初始化),var和let可以不用 // var var a a 1 console.log(a) // 1// let const b b 2 console.log(b) //Uncaught SyntaxError: Missing initializer in const declaration//const const c c 3 conso…
阅读更多...
richfaces a4j 常用标签例子(提供下载)

richfaces a4j 常用标签例子(提供下载)

在tomcat6.0下部署正常 如果你启动抛异常 是jar包冲突 给我留言 我将我tomcat的jar包发给你 本例子是在jboss4.2下运行正常 运行前修改 找到jboss安装目录下 jboss-4.2.3.GA\server\default\deploy\jboss-web.deployer\conf\web.xml 打开web.xml文件把下边的两个 listener注释…
阅读更多...
SQL sever T-SQL语句2

SQL sever T-SQL语句2

一、自增限制 自增限制一般用在ID上&#xff0c;可以自动给ID加序号。 create table 表名 ( 列名2 数据类型 primary key identity(0,1) &#xff0c; --identity就是自增限制&#xff0c;括号里代表从0开始&#xff0c;每次增加1. 列名2 数据类型&#xff0c; ) insert in…
阅读更多...
回发后动态设置的标题丢失

回发后动态设置的标题丢失

废话不说&#xff0c;看代码&#xff1a; <head runat"server"><title>test</title></head><body><form id"form1"runat"server"><div><asp:Button ID"btn1"runat"server"Tex…
阅读更多...
C# 数组和集合

C# 数组和集合

C#的数据组合分数组和集合两种&#xff0c;数组分一维数组和多维数组&#xff0c;集合有普通集合&#xff0c;泛型集合&#xff0c;哈希表&#xff0c;字典表&#xff0c;特殊集合等&#xff0c;特殊集合分队列和堆栈等。一、数组&#xff08;一&#xff09;一维数组int[] 数组…
阅读更多...
最新文章

Copyright @ 2022~2023