JavaScript原型对象

最新推荐文章于 2024-11-05 15:26:40 发布

hc_king

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量101

点赞数

分类专栏： JS基础原理文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_50713337/article/details/120198616

版权

JS基础原理专栏收录该内容

1 篇文章 0 订阅

订阅专栏

javaScript原型对象相关原理

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function Person(name, age){
			this.name = name;
			this.age = age;
		}
		Person.prototype.sayName = function(){
			console.log(this.name);
		}
		Person.prototype.a = 123;
		var person = new Person("小黄",18);
		//console.log(person.name)
		
		console.log(person.a);
		//判断其指向是否一样
		console.log(Person.prototype===person.__proto__);
		//利用__proto__访问原型对象
		console.log(person.__proto__.sayName);
		//利用__proto__访问原型对象，并调用sayName函数
		person.__proto__.sayName();
		person对象直接调用sayName函数
		person.sayName();
		
	</script>
	<body>
		
	</body>
</html>

运行结果：

[Web浏览器] "123"
[Web浏览器] "true"
[Web浏览器] "function (){
			console.log(this.name);
		}"
[Web浏览器] "undefined"
[Web浏览器] "小黄"

内存分析

原型对象内存分析图
原理介绍：每个函数都会有一个原型对象，而原型对象的地址保存于函数的一个叫prototype属性中（如上图），而当我们利用该函数创建对象时，会自动为我们创建一个叫__proto__的属性，该属性保存着该函数原型对象地址。不论利用该函数创建多少个对象，每个对象都会有__proto__属性，且保存着相同的地址。

优点介绍：
将该函数对象的常用方法放进原型对象中，可以不需要在创建对象时重复定义创建该函数，在一定程度上节省了内存。

疑惑点：
console.log(Person.prototype===person.__proto__);结果显示true，表示两地址值都一样，但当我们利用person.__proto__.sayName()调用原型对象里的函数，结果显示undefined,但却可以直接通过person.sayName()调用原型对象里的函数。