<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原型,原型链</title>
</head>
<body>
<h2>原型,原型链(链接点)</h2>
<script type="text/javascript">
/**
* 对应名称
* prototype : 原型
* __proto__ : 原型链(链接点)
*
* 从属关系
* prototype ->函数的一个属性:对象{}
* __proto__ ->对象object的一个属性:对象{}
* 对象的 __proto__ 保存的是该对象的构造函数的 prototype
*
**/
//定义一个函数
function Test() {
this.a = 1
}
//输出函数Test的prototype属性
console.log(Test.prototype);
Test.prototype.b = 2
//实例化一个对象
const tt = new Test();
//输出对象tt的__proto__属性
console.log(tt.__proto__);
//发现对象的__proto__属性 等于 构造函数的prototype 属性
console.log(tt.__proto__ === Test.prototype);
//构造函数的prototype属性也是一个对象,那它也存在 __proto__属性
console.log(Test.prototype.__proto__);
//上述中得出的 __proto__属性 等于 object 的 prototype 属性
console.log(Test.prototype.__proto__ === Object.prototype);
//Object.prototype 也是一个对象,但却没有__proto__,已经到原型链顶层
console.log(Object.prototype.__proto__); //null
Object.prototype.c = 3
/**
* tt{
* a:1,
* __proto__:Test.prototype = {
* b:2,
* __proto__:Object.prototype = {
* c:3
* }
* }
* }
*
* */
// 根据原型链一层与层往上找:
// 实例对象→→→构造函数原型对象→→→Object原型对象
console.log(tt.a);
console.log(tt.b);
console.log(tt.c);
//判断本身是否有属性
console.log(tt.hasOwnProperty('a'));
console.log(tt.hasOwnProperty('b'));
console.log(tt.hasOwnProperty('c'));
//判断原型链上是否有属性
console.log('a' in tt);
console.log('b' in tt);
console.log('c' in tt);
</script>
</body>
</html>
原型,原型链说明
最新推荐文章于 2024-08-27 13:38:21 发布