原型和原型链

最新推荐文章于 2024-11-16 14:11:26 发布

菜鸟小胖砸

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量91

点赞数

分类专栏： js日记文章标签： javascript

原文链接：https://www.bilibili.com/video/BV1ci4y157Ci

版权

js日记专栏收录该内容

56 篇文章 1 订阅

订阅专栏

本文深入探讨JavaScript中的原型和原型链概念，包括prototype和__proto__的区别、对象构造函数的关联、原型链继承以及Function与Object的关系。通过实例解析了如何通过原型链实现属性查找，并介绍了hasOwnProperty和in操作符在判断属性存在性中的应用。同时，阐述了constructor属性的用法及其可变性。

摘要由CSDN通过智能技术生成

原型和原型链

名称

prototype:原型
__proto__:原型链(准确说为原型链的节点，所有节点构成的关系链才是原型链)

从属关系

prototye:函数属性
__proto__:Object属性

两者都是对象
!!!对象的__proto__保存着该对象的构造函数的prototype!!!

基本认知

function a(){}
console.log(a.prototype)	//函数a的构造函数constructor

let b = new a;
console.log(b.__proto__)	//函数a的构造函数constructor

console.log(a.prototype === b.__proto__);	//true
//综上：对象的__proto__保存着该对象的构造函数的prototype

console.log(a.prototype.__proto__ === Object.prototye)	//true
console.log(Object.prototye.__proto__)	//null
//综上，原型链顶层为Object.prototype

原型链继承

function a(){
    this.x = 1;
};
console.log(a);

/*
	a{
		prototype:{
			constructor:f a()	---a自身
			__proto__:Object.prototype:{
				...
			}
			...
		}
		__proto__:{
			f() 		---Function
			...
		}
		...
	}
*/

a.prototype.y = 2;
Object.prototype.z = 3;
let b = new a();
console.log(b.x);	//1
console.log(b.y);	//2
console.log(b.z);	//3
console.log(b);	//b -> a -> Object

/*
	b{
		a:1,
		__proto__:{
			a.prototype:{
				y:2,
				__proto__:{
					Object.prototype:{
						z:3,
						...
					}
					...
				}
				...
			}
			...
		}
	}
*/

Function与Object

//Function与Object既是对象也是函数
function a(){}；
console.log(a.__proto__);	//f{} 	---Function.prototype
console.log(a.__proto__ === Function.prototype)		//true
console.log(Function.prototype === Function.__proto__)	//true

//function a(){} 与	var a = new Function()
//let obj = {} 与	let obj = new Object()

console.log(Function.prototype === Object.__proto__)	//true
console.log(Function.__proto_ === Object.__proto__)		//false

属性是否存在判断方法

对象内置方法：object.hasOwnProperty();	//查找本身属性
'属性' in object	//查找整个链上的属性

构造函数constructor

//实例化对象的constructor属性 -> 实例化对象的构造函数
fucntion a(){
    this.x = 1;
}
let b = new a();

console.log(b.constructor === a)	//true

//constructo允许更改