JS 基础篇(四) 原型与原型链

news/2024/7/19 15:28:01 标签: javascript, js

原型与原型链

在这里插入图片描述
1.js的无中生有。

js本源是null,js说要有神,通过万能术__proto__创造了No.1 神

2.以No.1创造对象

js说 你要有自己的想法,于是,No.1以自己为原型创造了Object
可以理解为 Object.prototype == No.1
我们把 prototype 叫做原型,好比 Object 的原型是神,男人的原型是人类一样

3.利用__proto__ 造No.2神

js说:你要有更多想法,把__proto__借用给No.1,
No.1利用__proto__ 创造了 机器No.2,
No.2创造了 Array,Number,Boolean,String等内置对象(就是构造函数)
No.2规定:所有的对象都可以通过__proto__找到No.2,然后找到No.1
这样: Object.prototype = No.1
	  Object.__proto__ = No.2

4.No.2造Function

js说:神造的机器No.2好厉害,能不能让使用js的人也可以造机器
神说:你通过万能术创造了我,我以自己为原型创造了Object,
那我造一个Function,并且:
Function.prototype == No2, Function.__ proto __ == No2

5.No.2成为造机器的机器

负责管理:Object、Function、String、Number、Boolean、Array 

6.总结

自此,
1.所有的构造函数均有原型 prototype
2.所有的对象均有万能术 __proto__ 指向他的构造函数的原型(prototype)
也可理解为:(关于这一点在几种继承总结会详细解释)
prototype服务于实例化对象
__proto__服务于函数对象

解决的疑惑

  1. “万物皆对象”,其实都是根据Object衍生出来,但是由于对象也是一个函数对象,或者说构造函数,所以以数据类型区分,他们同级

     Object String  Nubmer Boolean	Undefined	Null
    
  2. Function 声明出来的对象是什么

    函数是由Function声明出来的对象被叫做函数对象
    可以用作方法直接调用,
    也可以用做构造函数,进行实例化
    
  3. 什么是原型链

     访问一个对象的属性或者方法时,如果该对象身上没有,
     就通过__proto__去找到,实例化对象的构造函数的prototype身上寻找
     这样一直通过__proto__一直找到最顶层。
     这一条相互指引的过程就是原型链
    

显式原型与隐式原型

看一段代码

function Cat (name,age){
	this.name = name;
	this.age = age;
	this.getAge = function(){
		console.log(this.age)
	}
}
Cat.prototype={
	getName:function(){
		console.log(this.name)
	}
}
var cat = new Cat('kk',18)

console.log(cat.getName)
console.log(cat.__proto__)
console.log(Cat.prototype)
console.log(cat.__proto__ === Cat.prototype)
小白:__proto__,prototype 是什么?

划重点:
每个函数都有一个prototype原型属性,称之为显式原型属性或显式原型

每个实例对象都有一个__proto__原型属性,称之为隐式原型属性或隐式原型

实例对象隐式原型指向构造函数对象显式原型
小技巧:
函数定义的时候函数本身就会默认有一个prototype的属性,
而我们如果用new 运算符来生成一个对象的时候就没有prototype属性
所以 Cat 有,cat没有

关系图

自己画了一张关系图
在这里插入图片描述

参考资料

链接: 原型链图.

链接: 原型与原型链.

总结
也说一说为什么需要理解好原型链,
比如我想要去写一篇关于类型检测的方法,却不晓得他的检测原理。
比如我想写bind,call,apply 他们的区别 他们操作的是this,this在不同情况指向是不一样的
比如我想写继承那更不可能不晓得原型链了
所以我试着整理一份,其实本篇 没有过多个人理解。
大多数是学习来的。
说一说心得,本篇算是耗时比较久的了。自己在快速了解学习一个东西的能力有待提高。
再有一个就是,学习前端某一个点,像是走一条小路,往后你会发现还有很多路,但是走着走着你发现他们指向了同一座大山。上山的方式有千百种,希望你有一天登上山顶,俯瞰来时的风景。
最后,如果你一直学习,真的会累。xixi
全力以赴奔向你le。


http://www.niftyadmin.cn/n/1852551.html

相关文章

在磨砺中成长:请学会调整自己的情绪

突然想到写这个话题,绝非偶然。再过几个月,又到了七月份了,掐指一算,也没算清楚到底是进第几批新人了。(我在一个国家科研单位,每年都有不定期的招人)每年看着一张张新面孔进来的时候&#xff0…

feed

a1tf.placeholder(tf.float32) # 占位符 a2tf.placeholder(tf.float32)rtf.multiply(a1,a2) with tf.Session() as sess:   asess.run(r,feed_dict{a1:22,a2:3}) # 在这里赋上数值,先feed进去,然后实际run一下   print(a) atf.placeholder(tf.i…

JS 基础篇(五) 继承方法总结

原型链继承 code function Parent() {this.cars [Lamborghini,Maserati,Bentley];}Parent.prototype.showCars function () {// console.log(this.cars);};function Child() {}Child.prototype new Parent();// let parent new Parent()// parent.cars.push(QQ)// console…

关于this的全面解析(call,apply,new)

我们在写代码的时候,时常会被this弄的傻傻分不清楚,看源码的时候也经常被call啊apply啊弄的头皮发麻。this到底是什么?本文主要根据书上和实际应用做了一些归纳。一般情况下this有4种绑定规则: 1、默认绑定 - this指向全局变量 举…

RedHat Linux 9.0的安装(详细图解安装过程)

RedHat Linux版本:" b, t) b) b# }, t# z- fC& S$ x0 }) GRedHat Linux是目前世界上使用最多的Linux操作系统。因为它具备最好的图形界面,无论是安装、配置还是使用都十分方便,而且运行稳定,因此不论是新手还是老玩家都对它有很高的…

JS 基础篇(七) 函数柯理化

函数柯理化 定义 在计算机科学中&#xff0c;柯里化&#xff08;Currying&#xff09;是把接受多个参数的函数变换成 接受一个单一参数(最初函数的第一个参数)的函数&#xff0c; 并且返回接受余下的参数且返回结果的新函数的技术个人理解&#xff1a; sum(1,2,3) <> …

Ansible 拷贝文件或目录

写法如下&#xff1a; [rootlocalhost ~]$ ansible 192.168.119.134 -m copy -a "src/etc/passwd dest/tmp/passwd ownerroot grouproot mode0644" # 拷贝本机文件到远程客户端 [rootlocalhost ~]$ ansible 192.168.119.134 -m copy -a "src/etc/ansible des…

解决Windows Vista 英文版中文软件乱码

解决方法如下: 1, 开始->Control Panel->Regional and Language Options, Formats 标签里的 Current format 选择 Chinese (PRC); 2, Location 标签里的 Current location 选择 China; 3, Administractive 标签里单击 Change system locale 按钮, Current system locale …