JavaScript基础4之原型的原型继承、原型链和理解对象的数据属性、访问器属性

已于 2024-03-12 17:36:41 修改
阅读量740 收藏 28
点赞数 11
分类专栏： JavaScript 前端 文章标签： javascript 开发语言 ecmascript
于 2024-03-07 22:10:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34306228/article/details/136492687
版权

JavaScript基础

原型

原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript中大多是借助原型对象实现继承的特性。
龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。
我们来看个代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
</head>
<body>
<script>
    //继续抽取 公共的部分放到原型上
    const Person= {
        eyes: 2,
        head: 1
    }
    //女人  构造函数 继承 想要继承 Person
    function Woman(){

    }
    //Woman通过原型来继承Person
    Woman.prototype=Person
    //指回原来的构造函数
    Woman.prototype.constructor=Woman
    const red= new Woman()
    console.log(red)
    console.log(Woman.prototype)
    
    //男人 构造函数 继承 想要继承Person
    function Man(){
    }
    Man.prototype=Person
    Man.prototype.constructor=Man
    const pink=new Man()
    console.log(pink.head)
    console.log(pink)
</script>
</body>
</html>

请添加图片描述

问题

例如：
给女人加一个生孩子的方法

 //给女人添加一个方法 生孩子
    Woman.prototype.baby=function (){
        console.log("宝贝")
    }

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
</head>
<body>
<script>
    //继续抽取 公共的部分放到原型上
    const Person= {
        eyes: 2,
        head: 1
    }
    //女人  构造函数 继承 想要继承 Person
    function Woman(){

    }
    //Woman通过原型来继承Person
    Woman.prototype=Person
    //指回原来的构造函数
    Woman.prototype.constructor=Woman
    const red= new Woman()
    console.log(red)
    console.log(Woman.prototype)

    //给女人添加一个方法 生孩子
    Woman.prototype.baby=function (){
        console.log("宝贝")
    }

    //男人 构造函数 继承 想要继承Person
    function Man(){
    }
    Man.prototype=Person
    Man.prototype.constructor=Man
    const pink=new Man()
    console.log(pink.head)
    console.log(pink)
</script>
</body>
</html>

在这里插入图片描述

男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响。
在这里插入图片描述

解决

需求:男人和女人不要使用同一个对象，但是不同对象里面包含相同的属性和方法
答案:构造函数
new 每次都会创建一个新的对象

function Star(){
	this.age = 18
	this.say = function () {}
}
const ldh = new Star( )
const zxy = new Star()
console.log(ldh)
console.log(zxy)
console.log(ldh === zxy) // false每个实例对象都不一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>Title</title>
</head>
<body>
<script>
    /*//继续抽取 公共的部分放到原型上
    const Person= {
        eyes: 2,
        head: 1
    }*/
    //解决 构造函数 new 出来的对象 结构一样 但是对象不一样
    function Person(){
        this.eyes=2
        this.head=1
    }
    
    //女人  构造函数 继承 想要继承 Person
    function Woman(){

    }
    
    //Woman通过原型来继承Person
    //父构造函数（父类） 子构造函数（子类）
    //子类的原型 = new 父类
    Woman.prototype=new Person()

    //指回原来的构造函数
    Woman.prototype.constructor=Woman

    //给女人添加一个方法 生孩子
    Woman.prototype.baby=function (){
        console.log("宝贝")
    }

    const red= new Woman()
    console.log(red)
    console.log(Woman.prototype)
    red.baby() 

    //男人 构造函数 继承 想要继承Person
    function Man(){
    }
    
    Man.prototype=new Person()
    
    Man.prototype.constructor=Man
    const pink=new Man()
    console.log(pink.head)
    console.log(pink)
</script>
</body>
</html>

在这里插入图片描述

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链
在这里插入图片描述

在这里插入图片描述

  1. 只要是对象就有__proto__，指向原型对象。
  2. 只要是原型对象就有constructor，指回创造我的构造函数。

当访问一个对象的属性(包括方法)时，首先查找这个对象自身有没有该属性。
② 如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)
③如果还没有就查找原型对象的原型(Object的原型对象)
④ 依此类推一直找到Object 为止(null)
⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线
可以使用instanceof 运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    function Person(){

    }
    const ldh=new Person()

    console.log(ldh.__proto__===Person.prototype);
    console.log(Person.prototype.__proto__===Object.prototype)

    console.log(ldh instanceof Person)
    console.log(ldh instanceof Object)
    console.log(ldh instanceof Array)
    console.log([1,3,7] instanceof Array)
    console.log(Array instanceof Object)
</script>
</body>
</html>

在这里插入图片描述
正常的原型链都会终止于 Object 的原型对象，Object 原型的原型是 null

console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Person.prototype.__proto__.constructor === Object); // true
console.log(Person.prototype.__proto__.__proto__ === null); // true

 function Person(){}
 console.log(Person.prototype.__proto__);
{
        constructor: ƒ Object()
        hasOwnProperty: ƒ hasOwnProperty()
        isPrototypeOf: ƒ isPrototypeOf()
        propertyIsEnumerable: ƒ propertyIsEnumerable()
        toLocaleString: ƒ toLocaleString()
        toString: ƒ toString()
        valueOf: ƒ valueOf()
}

在这里插入图片描述

isPrototypeOf()

确定两个对象之间的关系
[[prototype]]

isPrototypeOf()会在传入参数的[[Prototype]]指向调用它的对象时返回 true

function Person(){}
    const person=new Person()
    console.log(Person.prototype.__proto__);
   
    console.log(Person.prototype.isPrototypeOf(person));

相当于：

 console.log(person.__proto__===Person.prototype) //true

在这里插入图片描述

Object.getPrototypeOf()

返回参数的内部特性 [[Prototype]] 的值

 console.log(Object.getPrototypeOf(person)===Person.prototype)  //true

理解对象

new Object() ==== {}

const person=new Object()
    person.name="张三"
    person.age=18
    person.say=function(){
        console.log(this.name)
    }

    person.say()

等同于

const person={
        name:"张三",
        age:20,
        say(){
            console.log(this.name)
        }
    }
    person.say()

在这里插入图片描述

数据属性

  • configurable:属性是否可以通过delete 删除并重新定义 ⇒true
  • Enumerable:属性是否可以通过for in 循环 =》 true
  • writable:属性是否可以被修改 =》 true
  • value:属性实际的值undefined

Object.defineProperty

访问器属性

  • configurable:属性是否可以通过delete 删除并重新定义 → true
  • Enumerable:属性是否可以通过for in 循环 =》 true
  • Get:获取函数
  • Set: 设置函数
    getter
    setter
let person ={
        year_:2023,
        age:18
    }

    Object.defineProperty(person,"year",{
        get(){
            console.log('get')
            return this.year_
        },
        set(newvalue){
            console.log('set',newvalue)
            this.year_=newvalue
            this.age +1
        }
    })
    console.log(person.year)

    person.year =2014
    console.log(person.age)

请添加图片描述

怎么创建出来一个__proto__指向undefined的对象

const n=Object.create(null)
console.log(n.__proto__)

在这里插入图片描述

create做什么的细节

//在new的时候
function myNew(){
    const person={}
    //create的参数不是null的情况: person.__proto__=Person.prototype
    //create的参数为null的时候
    person.__proto__=undefined
}

class类是语法糖

// prototype 库
// 语法糖
// babel -> es5
class Person {

}
VillanelleS
关注
专栏目录
JS 数据属性 & 访问器属性
qq_17371033的专栏
09-28 1961
JS 数据属性 & 访问器属性一个js对象（Object、Function）可以定义两种类型的属性：数据属性 或 访问器属性。共同特性数据属性和访问器属性有两个共通的特征可以设置： enumerable 是否能够被 for-in 遍历枚举 configurable 是否能够被 delete 关键字删除 数据属性数据属性的特征除了共同特征两种外，还有两种 value 定义值 writable 是否能够
js对象的数据属性和访问器属性
qq_42665870的博客
08-02 286
1.数据属性 configurable:能否使用delete删除属性而重新定义新的属性、能否修改属性特性、能否修改访问器属性；默认值为false（false为不可重新定义）。 enumerable:表示能否通过for-in循环返回属性；默认值为true,false为不可修改。 writable：能否修改属性的值；默认值为true,false为不可修改。 value：属性的数据值；默认值为u...
数据属性和访问器属性
wwww00o的博客
08-11 241
第二种：对象字面量创建，推荐使用这种方法。 数据属性 数据属性：包含一个数据值的位置，在这可以对数据值进行读写。数据属性包含的四个特性： 修改 要修改默认的特性，要用Object.defineProperty()方法 读取 通过Object.getOwnPropertyDescriptor()方法获取指定对象上一个自有属性对应的属属性描述。 注意：...
数据属性与访问器属性
m0_54386801的博客
08-07 254
数据属性与访问器属性 主要是用在defineProperty这个方法中 JavaScript中定义了两种不同的属性：数据属性和访问器属性。数据属性一般用于存储数据数值，而访问器属性一般进行get/set操作，不能直接存储数据数值。在ES5中，我们为了描述属性(property)的各种特征，定义了特性(attribute)。在JavaScript中不能直接访问特性，我们把它放在两对方括号中，例如[[Enumerable]]。 数据属性 数据属性主要有四个特性描述其行为： [[Configurable]]
深入理解javascript原型链和继承
10-25
在深入理解JavaScript原型链和继承的概念之前，首先要了解JavaScript是一种基于对象的语言，而非传统的面向对象语言。它没有类的概念，函数可以被视为构造器，而对象则是通过构造函数、原型对象和实例之间的特殊关系...
javascript 原型链维护和继承详解
10-25
JavaScript中的对象通过原型链来进行属性查找和方法调用，而原型链的维护和继承是JavaScript面向对象编程中的核心概念之一。 首先，原型链是指每个对象都会在其内部初始化一个指向构造函数原型（prototype）对象的...
理解javascript中的原型和原型链
10-23
原型是 JavaScript 中一个非常核心的概念，每个对象都拥有一个原型对象，通过这个原型对象，对象可以继承原型上的属性和方法。当我们访问一个对象的属性或方法时，如果在对象本身上没有找到，JavaScript 引擎会继续...
JavaScript中关联原型链属性特性
11-23
在JavaScript中，原型链是实现继承的核心机制，它涉及到对象属性的查找和访问。属性分为两种类型：数据属性和访问器属性。本文将主要探讨数据属性及其四个描述行为特性的详细知识。 数据属性包含了存储数据值的位置...
JavaScript——数据属性和访问器属性
Dancy的博客......
12-28 1247
在javascript中，数据属性和访问器属性
ECMAScript数据属性和访问器属性
草木黄尘
06-09 1153
ECMA-262中把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。” js中每个对象都是基于一个引用类型创建的。 创建自定义对象的最简单方式无非是创建一个object的实例，再为其添加属性和方法。 用对象字面量模式可以写成这样： 以上两种写法创建的person对象具有相同的属性和方法，这些属性在创建时都带有一些特征值，javascript通过这些特征值来定义他们的
理解 JavaScript 中的对象属性——数据属性与访问器属性
老司机的后备箱
11-08 527
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
深入理解js对象中数据属性和访问器属性使用教程
寬真
09-28 343
创建对象的方式有两种：第一种，通过new操作符后面跟Object构造函数，第二种，对象字面量方式。如下var person = new Object();};var pers。
【趣味JavaScript】一文让你读懂JavaScript原型对象与原型链的继承，探秘属性的查找机制! 《重置版》
最新发布
极客小俊
12-01 271
只有把原型链搞懂了，你才能叫刚刚学会javascript...
【精讲】Javascript对象属性（数据属性、访问器属性）
weixin_46229315的博客
03-26 2256
使用访问器属性 var person=｛ name:'xiaoming', ｝ Object.defineProperty(person,"sayName",{ get:function(){ return this.name; } }); perosn.sayName();
如何理解JS中的数据属性和访问器属性
arvin的博客
10-18 744
数据属性 1. 数据属性：数据属性包含一个数据值的位置。在这个位置可以读取和写入值。（JavaScript高级程序设计第三版) 2.数据属性包含的四个特性 configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，默认值：true。 enumerable：表示是否可以通过for-in循环返回属性，默认值：true。 writable：表示能否修改属性的值，默认...
JS数据属性和访问器属性
lxiaopfeng的博客
04-04 2436
JS-数据属性和访问器属性1、属性类型只有内部采用的特性。1.1数据属性: 包含一个数据值的位置，在该位置可以对数据值进行读写。如下面第一张图的name、age均为数据属性，满足在这个位置可以对数据值读写。（1）数据属性包含的四个特性（首字母小写）1）configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为true2）en...
理解javascript对象的数据属性和访问器属性
harmsworth的博客
03-31 2189
理解javascript对象的数据属性和访问器属性 理解javascript对象的数据属性和访问器属性 1.何为属性？ 2.数据属性 2.访问器属性 小结： 1.何为属性？ 属性就是与对象相关的值，而数据属性和访问器属性，就是属性的属性，用于描述属性的行为特性。 2.数据属性 数据属性（property）用于实现JavaScript引擎，是属性(property)的内...
Js中的数据属性和访问器属性
顺其自然~专栏
05-21 681
在javaScript中，对象的属性分为两种类型：数据属性和访问器属性。 一、数据属性 1.数据属性：它包含的是一个数据值的位置，在这可以对数据值进行读写。 2.数据属性包含四个特性，分别是： configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为true enumerable:表示能否通过for-in循环返回属性（enumerable是可枚举的意思） writable：表示能否修改属性的值 value：包含...
JavaScript面向对象深入理解：数据属性与访问器属性
本文档主要关注JavaScript面向对象编程的...总结来说，本文档深入讲解了JavaScript中的原型机制，包括如何定义和修改属性特性，以及原型链和继承的运作原理，这对于理解和编写高效、可维护的JavaScript代码至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值