我是歌謠 放棄很容易 但是堅持一定很酷 微信公眾號關注小歌謠一起學習前后端知識

閑來無事做 不如敲代碼今天講一下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方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。