我是歌謠 放棄很容易 但是堅持一定很酷 微信公眾號關(guān)注小歌謠一起學(xué)習(xí)前后端知識

閑來無事做 不如敲代碼今天講一下js里面的callapply和bind和typeof方法的手動封裝由于最近比較忙但是有時間就會記錄一下平時學(xué)習(xí)工作的一些代碼用來分享

這邊就不直接多說開始我們的直接代碼書寫表演

如果有什么不清楚的地方

可以自己進(jìn)行一個觀察討論

這個代碼是對js進(jìn)行的相關(guān)語法進(jìn)行的一個封裝

順便對于vite2.0做了一個簡單的一個學(xué)習(xí)

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 -> 一個內(nèi)存地址ctx.originFn = this; // 引用 var args = [];// 拿到myCall的第二個參數(shù)開始到結(jié)束的所有參數(shù)作為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的參數(shù)args = [].slice.call(arguments, 1),// 原型傳遞中介函數(shù)_tempFn = function () {};var newFn = function () {// 返回的新函數(shù)t的參數(shù)列表var newArgs = [].slice.call(arguments);// 如果new t, this -> newFn構(gòu)造出來的，實例化了，this -> newFn的實例 ： ctxreturn originFn.apply(this instanceof newFn ? this : ctx, args.concat(newArgs));}// 將test.prototype => 中介函數(shù)的原型屬性_tempFn.prototype = this.prototype;// 講中介函數(shù)的實例化對象 => 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;

我是歌謠 放棄很容易 但是堅持一定很酷 一起成為前端大佬 謝謝

總結(jié)

以上是生活随笔為你收集整理的手动封装js的call和apply和bind和typeof和new方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。