龙空技术网

javascript中的call方法的另一种实现方式-更接近原方法

Jsonk 199

前言:

现时你们对“html引入json”大概比较关心,朋友们都想要分析一些“html引入json”的相关资讯。那么小编也在网摘上汇集了一些有关“html引入json””的相关知识,希望小伙伴们能喜欢,各位老铁们快快来了解一下吧!

上集我们说到对应的我们自己实现的call方法还是有一点纰漏,这里我们就解决它

// 一、预备知识(简单介绍)// 1、Function.prototype.call()// 语法:function.call(thisArg, arg1, arg2, ...)// 参数:thisArg可选的。在function函数运行时使用的this值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为null或undefined时会自动替换为指向全局对象,原始值会被包装。arg1, arg2, ...指定的参数列表。// 返回值:使用调用者提供的this值和参数调用该函数的返回值。若该方法没有返回值,则返回undefined// 用法:// call() 允许为不同的对象分配和调用属于一个对象的函数/方法。// call() 提供新的 this 值给当前调用的函数/方法。你可以使用 call 来实现继承:写一个方法,然后让另外一个新的对象来继承它(而不是在新对象中再写一次这个方法)// 2、this指针// 在绝大多数情况下,函数的调用方式决定了this的值(运行时绑定)。this不能在执行期间被赋值,并且在每次函数被调用时this的值也可能会不同。ES5 引入了bind方法来设置函数的this值,而不用考虑函数如何被调用的。箭头函数不提供自身的 this 绑定(this的值将保持为闭合词法上下文的值)。当前执行上下文(global、function 或 eval)的一个属性,在非严格模式下,总是指向一个对象,在严格模式下可以是任意值。无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this都指向全局对象。在函数内部,this的值取决于函数被调用的方式。在严格模式下,如果进入执行环境时没有设置this的值,this会保持为undefined 。可以使用globalThis获取全局对象,无论你的代码是否在当前上下文运行。// 3、原型对象// JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain),它解释了为何一个对象会拥有定义在其他对象中的属性和方法。这些属性和方法定义在 Object 的构造器函数 (constructor functions) 之上的prototype属性上,而非对象实例本身// 4、Symbol// symbol 是一种基本数据类型。Symbol() 函数会返回 symbol 类型的值,该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的 symbol 注册,且类似于内建对象类,但作为构造函数来说它并不完整,因为它不支持语法:"new Symbol()"。每个从 Symbol() 返回的 symbol 值都是唯一的。一个 symbol 值能作为对象属性的标识符;这是该数据类型仅有的目的// 5、Object.defineProperty()// Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,第一个参数是对象,第二个是对象里面的属性,后面的第三个是参数配置,当对象对这个属性设置会触发里面的set方法,获取会触发get方法我们可以在其中做一些我们自己的操作,这两个方法是默认就有的,当然我们可以显式声明出来再加添自己的逻辑Function.prototype._call = function(context, ...args) {    //globalThis是全局对象,在浏览器中,全局对象是 Window    //注意这里我们将传入的对象和参数分开了    context = context === null || context === void 0 ? globalThis : Object(context);    //使用Symbol的原因:防止与提供新的 this 值的属性重复    //这里的symbol是为了防止属性冲突    const targetFn = Symbol('onlyKey');    //下面这个Object.defineProperty常用于爬虫的hook代码,以及对应的vue2的响应式原理【有兴趣可以去源码看看】,在ES6还出现了Proxy的方式来实现且功能更强大    Object.defineProperty(context, targetFn, {        // enumerable:为true时,该属性才能够出现在对象的枚举属性中。      enumerable: false,      value: this,    });    //这里是调用对象的方法【再对象中方法其实也是一种属性】那么就会走对应的上面的Object.defineProperty中的get方法【默认就有的,我们也可以自己定义】,它的value是this,那个this就是context因为我们给的对象就是context也就是我们调用传入的obj    const result = context[targetFn](...args);    return result;  };  function add(a, b) {    // 测试函数    console.log(this)    // { name: 'Alex-jsonk' }    // 注意这里和上一集的已经不一样了和call方法一样了    return a + b}let obj = {    name: "Alex-jsonk"}console.log(add._call(obj, 1, 2));//3

以上就是另一种写法,如果你面试前端工程师的时候只要写出一种已经超过大部分人了,当然我们只是为了最求技术的进步,成为顶端的人,我们必须精益求精,深入底层,下集再见。

标签: #html引入json