JS 对象、原型对象、继承、理解关键字new

最新推荐文章于 2022-07-25 18:04:32 发布
最新推荐文章于 2022-07-25 18:04:32 发布
阅读量296 收藏 1
点赞数 2
分类专栏： # ECMAScript 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ares5kong/article/details/117527920
版权

 

目录

 创建对象

1. new Object() 方式

2. 字面量方式

3. 构造函数方式

4. class方式

5. 特殊场景下简化对象方式

使用和扩展对象

1. 使用对象的属性和方法

2. 扩展对象的属性和方法

原型对象

1. 什么是原型对象

2. 原型对象的结构、原型链和查找机制

3. 继承

通过行为来理解 new

 

 创建对象

 

1. new Object() 方式

 

因为对象结构无法复用, 每次使用都需要重新定义结构, 适合只使用一次的场景

<script>
  let obj = new Object();
  obj.name = 'ares5k'
  obj.age = 27
  obj.say = function () {
    console.log('Hello World!')
  }
  obj.say()
</script>

 

2. 字面量方式

 

new Object() 方式的语法糖，依然无法复用, 但是语法更简单

<script>
  // 方式 1
  let obj = {
    name: 'ares5k',
    age: 27,
    say: function () {
      console.log('Hello World!')
    }
  }

  // 方式 2：简化方法定义
  let obj2 = {
    name: 'ares5k',
    age: 27,
    say() {
      console.log('Hello World!')
    }
  }
</script>

 

3. 构造函数方式

 

(1) 用关键字 this 给对象定义属性和方法

(2) 和普通函数语法一样, 只不过习惯函数名首字母大写, 真正让它具备创建对象能力的, 是关键字 new

(3) 适合结构稳定, 不常改变, 且会重复使用该结构的场景。对象结构可复用, 所以修改要小心, 要考虑到其他使用该结构的地方

<script>
  function Person(name, age) {
    this.name = name
    this.age = age
    this.say = function () {
      console.log('Hello World!')
    }
  }
  let obj = new Person('ares5k', 27)
</script>

 

4. class方式

 

1. 定义方法不能写 function 关键字

2. 定义属性, 要写在固定方法 constructor() 中

3. class方式其实就是构造函数方式的一个语法糖

<script>
  class Obj{
    constructor(name, age){
      this.name = name
      this.age = age
    }
    say(){
      console.log(this.name) // 结果：ares5k
      console.log(this.age) // 结果：27
      console.log('Hello World!') // 结果：Hello World!
    }
  }

  let obj = new Obj('ares5k', 27)
  obj.say()
</script>

 

5. 特殊场景下简化对象方式

 

<script>
  // 定义变量和函数
  let name = 'ares5k'
  let age = 27
  let say = function(){console.log('Hello World!' + this.name)}

  // 正常方式
  let obj = {
    name: name,
    age: age,
    say: say
  }

  // 简化对象方式
  let obj2 = {
    name,
    age,
    say
  }
</script>

 

使用和扩展对象

 

1. 使用对象的属性和方法

 

<script>

  // 创建对象
  let obj = {
    name: 'ares5k',
    say(){
      console.log('Hello World!')
    }
  }

  // 使用属性的两种方式
  console.log(obj.name) // 结果：ares5k
  console.log(obj['name']) // 结果：ares5k

  // 调用方法的两种方式
  obj.say() // 结果：Hello World!
  obj['say']() // 结果：Hello World!

</script>

 

2. 扩展对象的属性和方法

 

<script>

  // 创建对象
  let obj = {
    name: 'ares5k',
    say(){
      console.log('Hello World!')
    }
  }

  // 扩展属性的两种方式
  obj.age = 27
  obj['hobby'] = 'Jiu-Jitsu Brasileiro'

  // 扩展方法的两种方式
  obj.walk = function(){ console.log('走路!') }
  obj['sport'] = function(){ console.log('运动!') }

  // 测试
  console.log(obj.name) // 结果：ares5k
  console.log(obj.age) // 结果：27
  console.log(obj.hobby) // 结果：Jiu-Jitsu Brasileiro
  obj.say() // 结果：Hello World!
  obj.walk() // 结果：走路!
  obj.sport() // 结果：运动!

</script>

 

原型对象

 

1. 什么是原型对象

 

每个类型都有一个对应的原型对象( prototype ), 该类型所实例化出来的所有对象, 其内部都保存一个默认指向这个原型对象的引用( __proto__ )

 

作用：

(1) 原型对象可以用来共享方法, 减少内存占用

(2) 原型对象可以用来扩展内置对象

(3) 可以通过原型链和方法查找机制来模拟继承的效果

(4) object 对应的原型对象没有 __proto__ 属性, 它是原型链的重点

 

代码实验：

<script>

  // 定义构造函数
  function Person(name){
    this.name = name
    this.say = function(){
      console.log('Hello World!!')
    }
  }

  // 创建三个实例对象
  let person1 = new Person('p1')
  let person2 = new Person('p2')
  let person3 = new Person('p3')

  // 判断每个对象之间, 对象地址、对象属性、对象方法是否相同
  console.log(person1 === person2 || person1.say === person2.say || person1.name === person2.name) // 结果：false
  console.log(person2 === person3 || person2.say === person3.say || person2.name === person3.name) // 结果：false

  // 判断每个对象默认的内部引用 __proto__ 指向的原型对象是否是同一个
  console.log(person1.__proto__ === person2.__proto__) // 结果：true
  console.log(person2.__proto__ === person3.__proto__) // 结果：true

  // 类型对应的原型对象和对象内指向的是否是同一个  
  console.log(Person.prototype === person1.__proto__) // 结果：true
  
</script>

 

通过上面代码, 可以得到这个内存模型图：

上图可印证我们的观点, 每个类型都有一个对应的原型对象( prototype ), 该类型所实例化出来的所有对象, 其内部都保存一个默认指向这个原型对象的引用( __proto__ )

 

2. 原型对象的结构、原型链和查找机制

 

查看原型对象结构：

<script>
  // 定义构造函数
  function Person(){}
  // 打印原型对象结构
  console.dir(Person.prototype)
</script>

 

运行结果 ( 原型对象结构 )：

原型对象内部有两个主要属性 constructor 和 __proto__

 

constructor：

指向的是该原型对象所对应的构造函数, 本例中原型对象的 constructor 属性指向的就是与其对应的构造函数对象 Person

 

__proto__：

原型对象内的 __proto__ 是形成原型链的重要属性, 通常指向父构造函数所对应的原型对象, 本例中构造函数 Person 没有

显示指定父构造函数, 那么其默认的父构造函数就是 Object, Object 所对应的原型对象很特殊, 它没有 __proto__ 属性

是整条原型链的终点

 

对象结构图如下：

图中黄色部分的这条链路, 就被称为原型链。

 

查找机制就是沿着原型链查找：

(1) 访问对象的属性和方法时, JS 引擎会先在对象本身查找该属性和方法, 找不到执行 (2) 

(2) 在原型对象上查找, 找不到执行 (3) 

(3) 在原型对象的 __proto__ 属性指向的原型对象查找 (既父构造函数对应的原型对象中查找)

反复执行 (3), 直到找到属性和方法为止, 或者一直找不到, 但到了链路终点, 既父类是 object ( object原型对象没有 __proto__ )

 

修改 <什么是原型对象> 章节中的例子：

通过查找机制的特性, 我们可以把例子中一些能够共享的东西, 直接创建在原型对象中, 从而节约内存。

在 <什么是原型对象> 章节的例子中, 3个对象的 say() 方法逻辑相同, 所以可以定义在原型对象中, 让该类型的所有对象都可以共享访问

 

代码如下：

<script>

  // 定义构造函数
  function Person(name){
    this.name = name
  }

  // 将方法定义在该函数对应的原型对象中
  Person.prototype.say = function(){
    console.log('Hello World!!')
  }

  // 创建三个实例对象
  let person1 = new Person('p1')
  let person2 = new Person('p2')
  let person3 = new Person('p3')

  // 方法比较
  console.log(Person.prototype.say === person1.say) // 结果：true
  console.log(person1.say === person2.say) // 结果：true
  console.log(person2.say === person3.say) // 结果：true

</script>

通过上面代码, 又可以得到内存模型图：

通过上图可以看出, say() 方法从原来的 3 份, 变成了 1 份, 减少了内存占用。

 

3. 继承

 

(1) 通过原型链和查找机制来模拟继承

<script>
  // 创建父构造函数
  function Father(name) {
    this.name = name
  }

  // 为父构造函数的原型对象添加方法
  Father.prototype.money = function () {
    console.log(this.name + ' 赚钱')
  }

  // 创建子构造函数
  function Son(name) {
    // 调用父构造函数 (目的是继承父属性)
    Father.call(this, name)
  }

  // 修改子构造函数对应的原型对象
  // 1. 指定父类, 让原型对象中的 __proto__ 指向 Father 对应的原型对象 (目的是通过指定原型链来继承父方法)
  // 2. 因为是整体覆盖了 prototype, 所以要把原型对象中的 constructor 指回到 Son 构造函数对象
  Son.prototype = {
    __proto__: Father.prototype,
    constructor: Son
  }

  // 为子构造函数的原型对象添加方法
  Son.prototype.study = function () {
    console.log(this.name + ' 学习')
  }

  let son = new Son('ares5k')
  son.money() // 结果：ares5k 赚钱
  son.study() // 结果：ares5k 学习
  
</script>

完整结构图如下：

 

 

例中几个重点：

① 原型链：Son.prototype  → Father.prototype → Object.prototype

② 调用 study：Son 本身没有 study 方法, 接着去 Son.prototype 中找, 找到并执行 study 方法

③ 调用 money：Son 本身没有 money 方法, 接着去 Son.prototype 中找也没有, 再去 Father.prototype 中找, 找到并执行

④ 原型对象中 this 的指向：整个原型链中的 this 都是相同的, 都是实例对象, 既 new Son() 这个对象

 

(2) 通过语法糖来实现继承, 其本质还是构造函数 + 原型链方式

<script>

  // 创建父类
  class Father {
    constructor(name) {
      this.name = name
    }
  }

  // 为父类的原型对象添加方法
  Father.prototype.money = function () {
    console.log(this.name + ' 赚钱')
  }

  // 创建子类
  class Son extends Father {

  }

  // 为子类的原型对象添加方法
  Son.prototype.study = function () {
    console.log(this.name + ' 学习')
  }

  let son = new Son('ares5k')
  son.money() // 结果：ares5k 赚钱
  son.study() // 结果：ares5k 学习

</script>

 

通过行为来理解 new

 

通过 new 创建对象有三种情况：

1. 构造函数没有返回值, new 会返回一个构造函数类型的对象

2. 构造函数有返回值, 但是返回值不是对象类型, new 也会返回一个构造函数类型的对象

3. 构造函数有返回值, 并且返回值是对象类型, 那么 new 会直接返回这个对象

 

代码证实：

<script>

  // 定义无返回值构造
  function Person(name) {
    this.name = name
  }

  // 定义有返回值构造 - 返回值为对象以外的场合
  function Man(sex) {
    this.sex = sex
    return '字符串'
  }

  // 定义有返回值构造 - 返回值为对象的场合
  function People(name) {
    this.name = name
    return {age: 27}
  }

  console.dir(new Person('ares5k')) // 结果 Person: {name: ares5k}
  console.dir(new Man('man')) // 结果 Man: {sex: man}
  console.dir(new People('ares5k')) // 结果 Object: {age: 27}

</script>

 

模拟 new 的行为：

<script>
  
  // 定义构造函数
  function Person(name){
    this.name = name
  }

  // 模拟 new
  function dummyNew(fn, arg){
    // 1. 创建空对象 obj
    let obj = {}
    // 2. 改变 obj 的原型指向
    obj.__proto__ = fn.prototype
    // 3. 调用构造函数并修改构造函数内的 this 指向为 obj
    let result = fn.call(obj, arg)
    // 4.  根据构造函数的返回结果，来决定具体返回对象
    return result instanceof Object ? result : obj
  }

  // 测试
  let person = dummyNew(Person, 'ares5k')
  console.dir(person)

</script>

 

「已注销」
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript类继承extends和super关键字
zncrystal的博客
04-09 1193
构造函数不能继承，this指向父类，可以通过super将实参传递给父类的构造函数。 class Father { constructor(x,y) { this.x = x; this.y = y; } sum() { console.log(this.x + this.y); } } class Son extends Father { constructor(x,y) { super(x,y); //将
JavaScript中的类继承
KimSoft's Blog
05-21 2053
JavaScript中的类继承DouglasCrockfordwww.crockford.com翻译 ShiningRay @ www.nirvanastudio.orgAnd you thinkyoure so clever and classless and free--John LennonJavaScript一种没有类的，面向对象的语言，它使用原型继承来代替类继承。这个可
js 实现new操作符以及继承
XIAOLONGJUANFENG的博客
01-21 153
js 实现new操作符 new 干了啥? 来自MDN： new 关键字会进行如下的操作： 创建一个空的简单JavaScript对象（即{}）； 链接该对象（设置该对象的constructor）到另一个对象 ； 将步骤1新创建的对象作为this的上下文 ； 如果该函数没有返回对象，则返回this。 function CustomNew(fn) { const obj = {}; //1 obj.__proto__ = fn.prototype;//2 const result =
js继承之构造函数继承
qq_45803050的博客
11-26 330
js继承之构造函数继承 <!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"> <
javascript 面向对象全新理练之原型继承
10-29
在JavaScript中，面向对象编程主要依赖于原型继承机制。这是一种实现继承的方式，允许子类继承父类的属性和方法。以下是对原型继承的详细解释： 首先，我们要理解JavaScript的原型（Prototype）概念。每个函数在...
理解javascript对象继承
10-22
JavaScript对象继承是面向对象编程中的核心概念，它允许一个对象（子对象）获取另一个对象...理解JavaScript对象继承有助于编写更加高效和可维护的代码。在实际开发中，通常会结合使用多种继承策略，以达到最佳效果。
浅谈JavaScript对象与继承
01-19
JavaScript是我在C语言之后接触的第二门编程语言，大一暑假的时候在图书馆找了一本中国人写的JavaScript程序设计来看。那个时候在编程方面几乎还是小白...JavaScript代码当中随处可见new关键字，很容易让人产生误解，认
JavaScript对象原型链原理解析
11-21
通过理解这些基本概念，开发者可以更好地利用JavaScript的原型链进行对象间的继承，实现代码复用，同时也能更好地调试和优化代码。在实际编程中，掌握原型链原理对于编写高效和可维护的JavaScript代码至关重要。
JS原型对象的创建方法详解
10-22
JavaScript中的原型对象是实现继承和共享属性的一种机制。在JavaScript中，每个函数都有一个prototype属性，这个属性是一个对象，用于创建实例对象的原型。当尝试访问一个对象的属性时，如果该属性不存在，...
JS的继承（extends）
潮汐未见潮落的博客
06-22 1842
ES6的extends实现继承
【7期】彻底搞懂JS原型继承之——new 关键字都干了啥
微光·火炬
09-11 199
实例化构造函数，获取对象 新建了一个对象 obj 这个新对象被执行[[prototype]]连接，即将obj的_proto_指向构造函数的prototype对象 将构造函数的作用域赋值给obj，即将构造函数this指向obj 执行构造函数中的代码（为新对象obj添加属性） 如果函数没有返回其他对象，那么返回新对象 obj // 定义构造函数 function Fa (attr1, attr2) { this.attr1 = attr1 this.attr2 = attr2
js中继承的几种方式
前端-卡布达的博客
03-05 800
js中继承的几种方式 什么是继承？ 继承是指一个类能够使用另一个类的属性和方法。被继承的那个类称为父类，继承父类属性和方法的那个类叫做子类，即子类能够使用父类里的属性和行为。 继承的几种方式 一、原型链继承 特点：属性是共享的，如果属性中有引用数据类型，那么修改其中一个，另外一个也会修改。 实现方式：在要继承的子类的原型上面赋值为父类的实例化 例子如下： //父函数 function Parent(name,age) { this.name =
原型对象new的过程
最新发布
weixin_72953424的博客
07-25 123
小伙子什么车啊
Js理解之路：Js常见的6中继承方式
qq_51066068的博客
07-25 4021
一、JS 实现继承的几种方式 第一种：原型链继承 二、构造函数继承（借助call方法） 三、组合继承（原型链继承+构造函数继承） 第四种：原型式继承（借助Object.create） 第五种：寄生式继承 第六种：寄生组合式继承 二、ES6 的 extends 关键字实现逻辑......
JS类对象中的继承，关键字super
m0_48454458的博客
10-23 939
类继承中的super <script> // super 关键字调用父类普通函数 //注意点： // 继承中的属性或者方法查找原则: 就近原则 // 1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的 // 2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法(就近原则) //Father父类 class Fat
js：实现继承的几种方法（包括es6）
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
06-30 3284
js的继承方式有很多，比如 一、借用构造函数继承（call，apply，bind） 1.介绍 利用call，apply，bind借用父类的构造函数 2.实现 function Animal (name) { this.name = name this.showName = function () { alert(name) } } function Cat () { // apply用...
JavaScript面向对象，class关键字，继承，super关键字
TangJing_的博客
06-16 913
面向对象概述 面向过程 面向过程： 面向过程：面向过程就是分析出解决问题需要的步骤，然后用函数把这些步骤一个个实现，使用的时候依次调用。面向过程的核心是过程。
javascript中实现继承的三种方式（一看就懂）
热门推荐
js_admin的博客
04-30 1万+
javascript中实现继承的三种方式，简单明了一看就懂。。。。
深入理解JavaScript：this与对象原型
这本书《You Don't Know JS：this&Object Prototypes》深入探讨了JavaScript中的核心概念——`this`关键字和对象原型。作者Kyle Simpson旨在帮助读者理解这些关键概念，因为它们是JavaScript编程的基础。 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值