关于原型和原型链

本文详细介绍了JavaScript中的原型和原型链概念,包括对象的隐式原型_proto_和函数的显示原型prototype。通过实例展示了原型如何使实例访问构造函数的属性和方法。还探讨了原型链的工作原理,当查找对象属性时,如何沿着原型链向上搜索,直至找到Object.prototype._proto_指向null。此外,提及了ES6中Class的原型本质是函数,并指出其与传统构造函数的相似性。

要想理解什么是原型和原型链,必须先清楚这两个概念_proto_、prototype。

_proto_隐式原型,对象独有;
prototype 显示原型,函数独有;
函数也是一种对象,所以函数也有隐式原型。

原型

  • 每个对象都有一个隐式原型_proto_;
  • 每个函数都有一个显示原型prototype;
  • 对象的隐式原型_proto_指向它构造函数的显示原型prototype;
function Father(){
	this.colors = ['red','green']
}
Father.prototype.getColors = function(){
	return this.colors
}
function Child(){}
let child = new Child()
console.log(child.getColors()) // ['red','green']

实例化对象child._proto_指向它构造函数的 Father.prototype。
即child.proto= Father.prototype

一个对象的隐式原型指向该对象构造函数的显示原型。在显示原型上定义的属性和方法,通过隐式原型传递给了该构造函数的实例。这样实例就可以访问到构造函数的方法和属性了。

原型链

  • 访问一个对象的属性时,会先在该对象本身去找;
  • 如果没找到,则会去它的隐式原型_proto_去找,即它构造函数的prototype;
  • 如果构造函数的prototype也没有,会沿着构造函数的prototype的_proto_继续找;
  • 这样一层一层,直到Object.prototype._proto_指向null;

QA1: 原型链的终点是什么?
原型链的终点是null。

QA2: ES6 的 Class的原型本质是什么?
Class 的原型本质是函数 function。

 //ES6构造函数
 class Person{
 	constructor(name,age){
 		this.name = name;
 		this.age = age;
	}
	getInfo(){
		console.log(this.name + this.age);
	}
}
const man = new Person('hanmeimei',22)
man.getInfo() //hanmeimei 22

ES6 Class 构造函数原理和 js 构造函数的原理相同,只要理清楚一种,一通百通。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值