当前位置: 首页 > news >正文

JS | 改变 this 指向 | this 指向 null 为什么不影响原型链?

 省流总结:this,只影响函数执行时 this 的值

概念说明
this 绑定影响函数运行时内部 this 的指向(比如函数调用时谁是 this)
prototype 链接影响通过 new 调用时实例的原型链结构

背景:调用 函数.bind(null) ,将函数的 this 指向 null。为何这里的 this 不影响原型链?——》 this,只影响函数执行时 this 的值


分析【知识点汇总】:

区分两个完全不同的概念

概念说明
this 绑定影响函数运行时内部 this 的指向(比如函数调用时谁是 this)
prototype 链接影响通过 new 调用时实例的原型链结构

在这里:

  • bind(null, 'Suna') 中的 null 只是说:

    const BoundPerson = Person.bind(null, 'Suna');

    直接调用 BoundPerson() 时(不是 new 调用),内部函数里的 this 会被绑定到 Object(null)(即全局对象);

  • .prototype 这部分逻辑是 myBind 函数内部写死的,与传入的 objThis 无关。

所以 objThis(即 null只影响函数执行时 this 的值
不会影响 BoundPerson.prototype 如何被设置。


原例子

myBind是 手动实现 bind 绑定 this

Function.prototype.myBind = function(objThis, ...params) {const thisFn = this; // ← 注意:此时 this 就是调用 bind 的函数,也就是 Personlet funcForBind = function(...secondParams) {const isNew = this instanceof funcForBind;const thisArg = isNew ? this : Object(objThis);return thisFn.call(thisArg, ...params, ...secondParams);};// ⬇️关键语句在这里funcForBind.prototype = Object.create(thisFn.prototype);return funcForBind;
};

举例验证 myBind 的 bind 绑定情况 代码:

function Person(name) {this.name = name;
}
Person.prototype.sayHi = function() {console.log('hi, I am ' + this.name);
}const BoundPerson = Person.myBind(null, 'Suna');
const p = new BoundPerson();p.sayHi(); // ✅ hi, I am Suna
console.log(p instanceof Person); // ✅ true
console.log(p instanceof BoundPerson); // ✅ true

验证得出:BoundPerson.prototype.__proto__ === Person.prototype


提问:为什么const BoundPerson = Person.myBind(null, 'Suna'); ,这里将Person的this指向null,将其结果赋值给BoundPerson,为什么就可以推出 BoundPerson.prototype.__proto__ = Person.prototype?

分析 —— 调用时的具体代入

调用:

const BoundPerson = Person.myBind(null, 'Suna');

逐步推理:

  1. 这里 thisPerson,所以:

    thisFn = Person

  2. 创建了一个新函数:

    funcForBind = function(...secondParams) { ... }

  3. 执行了关键的语句:

    funcForBind.prototype = Object.create(thisFn.prototype); // 即: funcForBind.prototype = Object.create(Person.prototype);

  4. 然后返回:

    return funcForBind;

  5. 于是:

    const BoundPerson = funcForBind;


这意味着什么?

我们可以直接展开:

BoundPerson.prototype = Object.create(Person.prototype);

根据 Object.create 的语义:

Object.create(Person.prototype)

创建了一个新对象,它的 __proto__ 指向 Person.prototype

所以:

BoundPerson.prototype.__proto__ === Person.prototype

总结

BoundPerson.prototype = Object.create(Person.prototype);

BoundPerson.prototype.__proto__ === Person.prototype

http://www.dtcms.com/a/499949.html

相关文章:

  • 操作系统概述
  • 【计算机网络】初识HTTP(超文本传输协议)
  • 软件下载网站 知乎宁波seo网站建设费用
  • AI编程实战:用 TRAE 开发一个写作助手
  • 方法论:从社会契约到公司流程制度
  • 高效率小尺寸全集成同步降压电源模块替代MPM3630/MPM3620/MPM3610/MPM3606
  • 帮别人做网站赚钱阿凡达网站建设
  • 广告营销的好处如何做网站优化关键词优化
  • 长春网站制作长春万网wordpress论坛模板下载
  • 徐州模板开发建站移动端设计规范
  • 网站建设拍金手指排名贰贰女生大专学什么专业好
  • 外贸门户网站东莞东城万达
  • 柬埔寨网站建设运营维护金华东阳网站建设
  • 盐城网站开发怎么样大连工业大学研究生院官网
  • STM32G474单片机开发入门(十五)CAN通信功能详解及实战
  • 金仓多模数据库平替 MongoDB:电子证照国产化的技术实操与价值突破
  • Unity:UGUI笔记(二)——UI事件监听接口
  • CSRF 漏洞全解析:从原理到实战
  • 建设项目备案网站管理系统一般网站建设流程有哪些步骤
  • 深圳AI搜索优化:助力企业精准获客新趋势
  • 免费搭建个人网站河北省建设厅网站老版
  • 菏泽市建设职工培训中心网站重庆seo结算
  • dedecms 网站模板网络营销推广技术
  • SMDJ14CA双向 TVS瞬态抑制二极管:高效瞬态电压抑制,保护电路安全
  • 怎么免费自己做网站适合0基础网站开发软件
  • 响应式网站排名如何医疗卫生网站前置审批
  • 网站建设的合理建议企业网站商城
  • C++ vector容器的解析和使用
  • STM32G474单片机开发入门(十四)SPI总线详解及NRF2401模块实战
  • 接口测试的测试用例应该怎么写?