首页 > 其他分享 >前端必备基础系列(七)原型/原型链/this

前端必备基础系列(七)原型/原型链/this

时间:2025-01-06 22:11:22浏览次数:9  
标签:函数 对象 必备 绑定 原型 prototype 前端 属性

对象的原型:
JavaScript中每个对象都有一个特殊的内置属性[[prototype]],这个特殊属性指向另外一个对象。
当我们访问一个对象上的某个属性时,首先会检查这个对象自身有没有这个属性,如果没有就会去[[prototype]]指向的对象查找。
那么这个特性就可以帮助我们实现继承了。
如何获取到这个[[prototype]]属性指向的对象?
方法一:通过对象的__proto__属性可以获取到(但这个属性是早期浏览器自己添加的,存在一定兼容性问题),建议开发测试用。
方法二:通过Object.getPrototypeOf方法获取,可以在生产环境使用。

Object.setPrototypeOf(对象,原型) 方法可为某个对象指定原型。(了解即可)

函数的原型:
所有函数都有一个prototype属性

new操作会进行如下四步:
1.创建一个新对象
2.将构造函数的this绑定到这个对象
3.这个对象内部的[[prototype]]属性(一般是__proto__)会被赋值为该构造函数的prototype
4.构造函数返回该对象

原型继承关系图:

this

作用:提供一种在对象方法中引用当前对象的方式。

this是在运行时被绑定的;
默认绑定:当函数在非严格模式下独立调用时,this默认绑定到全局对象(浏览器中是window对象,在Node中是global对象),严格模式下,this是undefined。优先级最低
隐式绑定:当函数作为对象的方法被调用时,this绑定到该对象。
显式绑定:通过call、apply、bind方法,显式指定this绑定的对象。call和apply会立即调用函数并传递this,而bind会返回一个新的函数并绑定着指定的this。优先级高于隐式绑定
new绑定:通过new关键字调用构造函数时,this绑定到新创建的对象实例。优先级高于bind

初以上四种规则外,还需注意箭头函数中:
箭头函数不会创建自己的this,他会使用外部作用域的this值,通常是定义箭头函数时所在的上下文。并且是固定的不能被call等改变。

标签:函数,对象,必备,绑定,原型,prototype,前端,属性
From: https://www.cnblogs.com/codeyx/p/18651687

相关文章

  • 前端面试题(webpack高级配置!)
     所谓高级配置其实就是进行Webpack优化,让我们代码在编译/运行时性能更好~我们会从以下角度来进行优化:提升开发体验提升打包构建速度减少代码体积优化代码运行性能1.提升开发体验SourceMap1.为什么开发时我们运行的代码是经过webpack编译后的,例如下面这个样子:/*......
  • 【前端面试题】前端中的两个外边距bug以及什么是BFC
    外边距合并问题兄弟组件中,如果一个设置margin-bottom,另一个设置margin-top,会导致外边距出现合并的问题,例如box1设置下边距50px,box2设置上边距20px,那么二者之间的外边距进行合并取最大值,所以二者之间相距只有50px。解决办法:给两个兄弟组件加一个父组件,让父组件开启flex布局.......
  • 前端学习openLayers配合vue3(修改地图样式)
    这一块的东西非常简单,基于上一步的继续操作关键代码,当然对应的对象需要进行相关的引入//填充颜色style:newStyle({fill:newFill({color:"rgba(255,0,0,0.5)",})})效果 完整代码<scriptsetup>i......
  • 前端必知:async/await与Promise深度剖析
    文章目录一、引言二、Promise基础入门2.1Promise是什么2.2三种状态详解2.3基本用法示例三、async/await初相识3.1语法糖的魅力3.2基本使用规则3.3代码示例展示四、两者的关联与区别4.1关联:async/await与Promise协同4.2区别:语法、错误处理与适用场景五、......
  • ruoyi若依前端验证码不显示的终极解决方法.20230721
    ​搞了3天啊,查了各种资料啊。然后使劲的看log啊,总算搞定了啊。一般情况,本地开发环境测试没问题,部署到服务器就各种不适应,就是服务器配置的问题了。本次这种验证码不显示,典型的nginx的配置问题。正确的nginx配置如下:events{worker_connections1024;}http{i......
  • Java必备知识点
    37.接口中的方法是抽象的方法,必须没有方法体即花括号(一定记住抽象方法没有方法体)38.39.A是接口,a是A接口的引用变量,将A一个具体实现的类C创建一个对象,赋值给a,a此时可以调用C中重写的A的方法40.图形化用户界面包:通常由awt、swing两种包41.booleanb为true的时候窗口可见,为f......
  • 前端基础知识:浏览器的进程与线程
    白话文先总结把浏览器想象成一栋楼,每家就是一个进程,家里的每个人就是线程,每个进程有一块独立的区域也就是内存,每个进程可以有多个线程同时工作可以互不干扰。1.什么是进程与线程?进程定义:进程是计算机操作系统中资源分配的最小单位。特点:每个进程有独立的内存空间......
  • 前端性能优化原理与实践笔记
    知识体系与小册格局写给读者提起性能优化,大家现在脑海里第一时间会映射出什么内容呢?可能是类似“雅虎军规”和《高性能JavaScript》这样历久弥香的经典之作,也可能是搜索引擎聚合给你的一篇又一篇以性能优化为主题的个人或团队实践而来的“私货”。至少当我确定自己的研发方向......
  • 有哪些方法可以禁止别人调试自己的前端代码?
    禁止别人调试自己的前端代码是一个具有挑战性的任务,因为前端代码在客户端执行,用户总有一定的访问和修改权限。然而,你可以采取一些措施来增加调试的难度或减少调试的可能性。以下是一些建议的方法:代码混淆:使用工具如Obfuscator等来混淆你的JavaScript代码。这可以将变量名、函......
  • Java必备知识点
    1.setSize()设置宽高,setTitle()设置标题,setAlwaysOntop(true/false)设置置顶,setLocationRelative(null)设置居中,setDefaultOperation(),setVisable(true)2.一个大长条就是JMenuBar,下面一级是JMenu,再下面一级是JMenuItem,我们需要先创建JMenuBar,在创建JMenu,再创建JMenuItem,把JMenuItem放......