手动封装js的call和apply和bind和typeof和new方法

我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣一起学习前后端知识

闲来无事做 不如敲代码今天讲一下js里面的callapply和bind和typeof方法的手动封装由于最近比较忙但是有时间就会记录一下平时学习工作的一些代码用来分享

这边就不直接多说开始我们的直接代码书写表演

如果有什么不清楚的地方

可以自己进行一个观察讨论

这个代码是对js进行的相关语法进行的一个封装

顺便对于vite2.0做了一个简单的一个学习

vite2.0相对于webpack打包工具拥有自己的特点

我是歌谣放弃很容易但是坚持一定很酷

const utilsModule = ((Function) => {/**// contextFunction.prototype.myCall = function (ctx) {// ctx => { a: 1, b: 2 }// this => test => this => ctx// ctx => object// ctx.test => test -> this => ctxctx = ctx ? Object(ctx) : window;// originFn & test -> 一个内存地址ctx.originFn = this; // 引用 var args = [];// 拿到myCall的第二个参数开始到结束的所有参数作为test的实参列表for (var i = 1; i < arguments.length; i ++) {// args + 字符串 -> args 展开平铺到fn的实参中去args.push('arguments[' + i + ']');}// ctx.originFn([arguments[1], arguments[2]]);// ctx.originFn(['arguments[1]', 'arguments[2]']);// 'ctx.originFn([arguments[1], arguments[2]])'var ret = eval('ctx.originFn(' + args + ')')delete ctx.orgiinFn;return ret;}Function.prototype.myApply = function (ctx, args) {ctx = ctx ? Object(ctx) : window;ctx.originFn = this;if (typeof args !== 'object' && typeof args !== 'function') {throw new TypeError('CreateListFromArrayLike called on non-object');}if (!args || typeOf(args) !== 'Array') {return ctx.originFn();}var ret = eval('ctx.originFn(' + args + ')');delete ctx.originFn;return ret;}Function.prototype.myBind = function (ctx) {var originFn = this,// bind传递的test的参数args = [].slice.call(arguments, 1),// 原型传递中介函数_tempFn = function () {};var newFn = function () {// 返回的新函数t的参数列表var newArgs = [].slice.call(arguments);// 如果new t, this -> newFn构造出来的，实例化了，this -> newFn的实例 ： ctxreturn originFn.apply(this instanceof newFn ? this : ctx, args.concat(newArgs));}// 将test.prototype => 中介函数的原型属性_tempFn.prototype = this.prototype;// 讲中介函数的实例化对象 => newFn的原型属性newFn.prototype = new _tempFn();return newFn;}function typeOf (value) {if (value === null) {return 'null';}// ({}).toString.call(value) -> [object Object]// var types = {//   '[object Object]': 'Object',//   '[object Array]': 'Array',//   '[object Number]': 'Number',//   '[object String]': 'String',//   '[object Boolean]': 'Boolean'// };// if (typeof(value) === 'object') {//   var res = ({}).toString.call(value); //[object Object]//   var type = types[res]// }return typeof(value) === 'object' ? {'[object Object]': 'Object','[object Array]': 'Array','[object Number]': 'Number','[object String]': 'String','[object Boolean]': 'Boolean'}[({}).toString.call(value)] : typeof(value);}// var test = myNew(Test, 1, 2);function myNew () {var constructor = [].shift.call(arguments),_this = {};_this.__proto__ = constructor.prototype;var res = constructor.apply(_this, arguments);return typeOf(res) === 'Object' ? res : _this;}function instanceOf (target, type) {type = type.prototype;target = target.__proto__;while (true) {if (target === null) {return false;}if (target === type) {return true;}target = target.__proto__;}}return {typeOf,myNew,instanceOf}})(Function);export default utilsModule;

我是歌谣放弃很容易但是坚持一定很酷一起成为前端大佬谢谢

手动封装js的call和apply和bind和typeof和new方法相关推荐

手动封装JS库jQuery
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
【JS】call，apply，bind
[JS]call,apply,bind const steven = {name: "Steven",phoneBattery: 70,charge: function (leve ...
JS 中 call()、apply()、bind() 的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全理解! 先看明白下面: 例 1 obj.objAge; // 17obj.myFun() // 小张年龄 undefined 例 2 show ...
趣谈js的call和apply两大召唤术
前言在<趣谈js的bind牌胶水>这篇文章中,我聊到了js的bind牌胶水,这篇文章我来聊聊bind牌胶水的升级版:call和apply方法. Why? --> 为什么会出现app ...
微信小程序之apply和call ( 附示例代码和注释讲解） apply call bind
微信小程序开发交流qq群 173683895 相同点:作用是一样的,它们能劫持另外一个对象的方法,继承另外一个对象的属性: js中的call(), apply()和bind()是Function. ...
linux band0 手动重启,band,call,apply的区别以及手动封装
这三个api都是改变this的指向问题, 在前端开发过程中,会经常使用到这三个api,那么需要我们非常清楚,这三个之间的区别,话不多说,代码实现 call,apply的区别这两个 api 非常相似, ...
理解js中的this指向以及call，apply，bind方法
<script> function a(){var user = "追梦子";console.log(this.user); //undefinedconsole.lo ...
关系图d3、封装js
demo:https://github.com/binliuli/visual.git 有的时候需要自己封装js所谓的组件,参考:使用 data-* 属性来嵌入自定义数据 list: visual: ...
js之call,apply和bind的模拟实现
了解call,apply和bind对于看一些源码以及封装一些工具有很大的作用. 如果想要了解并熟练使用它..就必须知道他的基本的实现原理. 一,基本用法使用 let obj = {a: 18 }fu ...

手动封装js的call和apply和bind和typeof和new方法

手动封装js的call和apply和bind和typeof和new方法相关推荐

最新文章

热门文章