首页 > 其他分享 >瞎写的原型理解

瞎写的原型理解

时间:2022-10-23 15:36:26浏览次数:81  
标签:Function __ proto Object 理解 原型 prototype

原型与原型链的基础定义理解

关于原型与原型链下面这些基础 JavaScript 知识一定要 “死记硬背” 的。只有 “死记“,才能 “用活”。

  1. 对象是某个特定引用类型的实例,可以理解为对象要通过构造函数实例化实现的,而构造函数本身又是一个对象,构造函数本身又需要通过构造函数实例化实现。
  2. JavaScript 提供了很多原生引用类型:Object、Array、Function、String、Number、Boolean、Date、RegExp,Map、WeakMap、Set、Symbol、BigInt 同时它们也都是原生构造函数
  3. 每个函数都是 Function 类型的实例,因此函数也是对象,所以同时拥有 protoprototype属性
  4. 对象都拥有隐式原型(proto 属性)指向它的构造函数的原型对象(prototype 属性)
  5. 每个构造函数都有一个 prototype 属性,叫原型对象(注意:原型对象,本质是对象),也叫显式原型
  6. 原型对象上有一个 constructor 属性指向构造函数本身
  7. 通过 new 实例化出来的对象没有 prototype 属性
  8. 对象都具有 proto 属性
  9. 宇宙的尽头:Object.prototype.proto === null
  10. 对象的constructor 属性用于返回创建该对象的函数

注意:并不是所以的prototype属性都是对象 Function.prototype是一个函数 它的proto属性又指向Object.prototype

typeof Function.prototype // 'function'

上面的规则 1、2、3 结合一起理解。
我们知道对象是可以这样实现的 const obj = new Object() 那么 obj 就是引用类型 Object 的实例,也就是说 obj instanceof Object 为 true,而 Object 又是原生构造函数,即 typeof Object === "function",每个函数都是 Function 类型的实例,也就是 Object 也是 Function 的实例,即 Object instanceof Function 为 true

通过原型与原型链进行理解。

const obj = new Object() ,那么根据上面的规则 4 和 5 可以得知,obj.__proto__ === Object.prototype根据规则 2、3、4 可以知道 Object 本身是引用类型也就是对象,根据规则 8,Object 拥有隐式原型 proto__ 同时 Object 也是一个函数,而函数都是 Function 的实例,也就是 Object 是 Function 的实例,因为对象的隐式原型(__proto 属性)指向它的构造函数的原型对象(prototype 属性) 所以:Object.__proto__ === Function.prototype,根据上面的规则 5,Function.prototype 本质是对象,根据规则 8,Function.prototype 拥有隐式原型 __proto__,而对象是通过原生构造函数 Object 实现的,所以 Function.prototype.__proto__ === Object.prototype,最后根据规则 9,Object.prototype.__proto__ === null 。

至此,这整一个链路的过程也就是原型与原型链的原理解析过程,本质就是通过属性 __proto__ 进行链接每一个节点对象。

每个函数都是Function的实例

上面的规则 3:每个函数都是 Function 类型的实例,因此函数也是对象。

function fn(){}
fn.__proto__ === Function.prototype //true
Object.__proto__ === Function.prototype //true
String.__proto__ === Function.prototype //true
Number.__proto__ === Function.prototype //true
Array.__proto__ === Function.prototype //true

Function 自己也是 Function 的实例,首先通过上文我们已经可以得知:

typeof Function === 'function' // true
Function instanceof Function === true // true
Function.__proto__ === Function.prototype //true

constructor

根据规则10可以知道,对象的constructor 属性用于返回创建该对象的函数;

let obj = new Object()
obj.constructor === Object  //true

let Star = function(){}
let s = new Star()
s.constructor === Star //true

// 根据规则3可以知道,每个函数都是 Function 类型的实例,因此函数也是对象,所以同时拥有 __proto__和prototype属性
Array.constructor === Function //true
Object.constructor === Function //true
Number.constructor === Function //true
String.constructor === Function //true

原型

  • prototype 一般称为显式原型,proto__`一般称为隐式原型。每一个函数在创建之后,在默认情况下,会拥有一个名为 `prototype` 的属性,这个属性表示函数的原型对象。除此之外,每个 JavaScript 对象都有一个隐藏的原型属性——`__proto
  • 原型对象的作用就是用来存放实例对象的公有属性和公有方法。在使用构找函数实例化的时候,会重复创建一次相同的属性和方法,属于代码的冗余。所以把共用属性和方法放在原型对象里共享
function Fn() {}
const obj = new Fn()
// 对象 obj 的隐式原型指向构造函数 Fn 的原型对象
obj.__proto__ === Fn.prototype //true

原型链

1.当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
2.如果没有就查找它的原型(也就是__proto__ 指向的prototype原型对象) .
3.如果还没有就查找原型对象的原型( Object的原型对象) .
4.依此类推一-直找到Object为止( null) .
5.__proto__对象原型的意义就在于为对象成员查找机制提供-个向,或者说一条路线

原型链查找规则:首先看自身对象上是否有这个属性,如果有就直接返回;如果没有就会沿着__proto__这个隐式原型往上查找,也就是去构造函数的原型对象prototype身上查找

 function Star(uname,age){
   this.uname = uname
   this.age = age
}
Star.prototype.sing1 = function(){
      console.log('sing1')
}
Object.prototype.sing2 = function(){
      console.log('sing2')
}
let ldh = new Star('ldh',18)
ldh.sing1() //sing1
ldh.sing2() //sing2
 

 

部分内容转载https://juejin.cn/post/7129157532970385421

标签:Function,__,proto,Object,理解,原型,prototype
From: https://www.cnblogs.com/Lucky-daisy/p/16818646.html

相关文章

  • 关于java中VO,DTO的理解
    @Data@JsonIgnoreProperties(ignoreUnknown=true)publicclassAllCodeCoverageRateSettingDto{privateIntegerid;privateStringdept;privateLongcreateTime......
  • PHP array_multisort 多维数组排序的理解
    array_multisort(array1,sortingorder,sortingtype,array2,array3...) 1.数组从前往后,依次排序;前一组数中值相同时,才考虑后一个数组中的值排序;2.任一数组排序变......
  • 【C语言】函数的概述、函数的好处、库函数、语法原型。
    ......
  • pandas里的缺失值(理解与相关方法)
    由于数据库或数据集中存在大量缺失数据和空值,这时在pandas中经常用NAN代替。pandas用标签方法表示缺失值:一:浮点数据类型的NaN值二:python的None对象其中,None是一个pytho......
  • String == 理解
    1.下面的结果是falseStringstr=newString("aa");Stringstr1=newString("aa");System.out.println(str==str1);new出来的对象都是在堆上分配对象,==此时比较的是......
  • 对函数重载的理解
    函数重载其实是方法的多态性的一种体现函数重载其实严格来说是一种方法名称重用的功能,利用特定的机制可以让一个方法实现不同的功能方法重载的实现方法的名称相同(强......
  • c语言基础理解(原创)
        家中小女初上大学开学计算机课程,学习C语言时遇到困难,为帮助她尽快入门,特写了这篇基本概念理解,希望帮她快速认识清楚C语言的本质。发到博客园上,也帮助同样的C语言......
  • cat userlist的理解
    学习要求Linux文件系统的三层抽象是什么?写出Catuserlist的过程,要详述目录文件,i-node.数据块,要画图示意假设块大小为4k,userlist的大小不小于10k,自己假设大小Linux......
  • This:从执行上下文的角度来理解这个
    This:从执行上下文的角度来理解这个。这在全局执行上下文中让我们首先看看这在全局执行上下文中是什么。可以在控制台输入console.log(this)在全局执行上下文中打印出这......
  • 原型、原型链、优点////作用域、作用域链////闭包、应用场景、优点、存在的问题
    一、原型、原型链、优点1、原型:在javascript中,函数可以有属性。每个函数都有一个特殊的属性叫做原型(prototype)2、原型链:JavaScript常被描述为一种基于原型的语言(prototy......