原型 & 原型链 & ES6 的 class

已于 2023-09-26 17:18:28 修改
阅读量452 收藏
点赞数
文章标签： es6 原型模式 javascript
于 2020-12-30 10:21:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37856464/article/details/110630692
版权

理解 constructor & prototype（显式原型属性） & __proto__（隐式原型属性）

以👇为例理解 constructor & prototype & __proto__ 之间的关系

function People(name) {
    //隐式的执行了：
    // var this = {__proto__: People.prototype};
    this.name = name;
     //隐式的执行了：
    // return this;
}

// People.prototype = { constructor: People }; //这是在 People 函数被定义的时候，就有的~
// 原型对象也是对象，所以它的值中应该包含 __proto__ 属性，People.prototype = { constructor: People, __proto__: Object.prototype}; //这是在 People 函数被定义的时候，就有的~

People.prototype.sayName = function() {
    console.log('this.name --> %s', this.name);
}

var people1 = new People('张三');
var people2 = new People('李四');

people1.__proto__ === People.prototype; //true
people1.constructor === People.prototype.constuctor; //true
people1.__proto__ === people2.__proto__; //true

即：
1. 每个构造函数都有一个原型属性 （eg. People.prototype）。
2. 每个实例都有 __proto__ 属性, __proto__ 属性指向了实例构造函数的原型 （eg. people1.__proto__）。
3. 原型也是一个对象，是函数（Funciton）的一个属性。
4. 通过构造函数产生的对象，可以继承构造函数以及其原型上的属性和方法。
  1. 每个构造函数都有一个原型属性 （eg. People.prototype）。
  2. 原型也是一个对象，是函数（Funciton）的一个属性。
  3. 所有函数都有__proto__ 属性（函数是特殊的对象)，函数（不管是内置的还是自定义的函数）的 __proto__ 都指向 Function.prototype。
  4. 每个实例都有 __proto__ 属性, __proto__ 属性指向了实例构造函数的原型 （eg. people1.__proto__）。
  5. 通过构造函数产生的对象，可以继承构造函数以及其原型上的属性和方法。
  6. 构造函数特点：大驼峰式
  7. 隐式和显式都是对属性的修饰，它们指向的对象都叫做原型对象

PS:

  1. __proto__ 并不是语言本身的特性，而是各大厂商添加的私有属性，所以尽量避免使用，
  2. 如果想获取实例对象的原型 可以通过 Object.getPrototypeof(实例对象)

关于 prototype：

每一个函数天生自带一个属性叫做 prototype ，他是一个对象

只要函数定义好了以后，这个 prototype 就出生了

构造函数也是函数，也有prototype，可以向prototype对象里面添加内容

这个天生自带的prototype里面有一个属性，叫做 constructor => 表示是哪一个构造函数伴生的原型对象。

关于 __proto__ ：

每一个对象天生自带一个属性，叫做 __proto__ , 指向所属构造函数的 prototype

实例化对象也是一个对象

实例化对象也有 __proto__ 属性

对象访问机制：

**********

当访问一个对象的属性成员的时候，现在对象身上找，

找不到再到对象的__proto__上去找

再没有，再去__proto__上去找(即去找构造函数的prototype对象的__proto__)

一直找到顶级对象的 __proto__ 都没有，就返回 undefined

***********

先访问对象的直接属性或者方法，如果没有，访问对象的__proto__(即构造函数的prototype对象)上是否存在这个属性或者方法

prototype的作用：就是为了书写一些方法给构造函数的实例对象使用 

=> 因为这个构造函数的每一个实例都可以访问这个构造函数的 prototype。

问题 :

1. 每一个构造函数都有 prototype , prototype是一个对象，所以prototype对象也有 __proto__ 属性，它指向谁？

2. 构造函数也是函数，函数也是一个对象，所以函数本身也有__proto__属性，它指向谁？

例子：
1. var arr = []; Array 的实例
2. var obj = {}; Object 的实例
3. var p1 = new Person(); Person 的实例
4. var time = new Date(); Date 的实例
5. var fn = function() {}; Function 的实例
6. Person.prototype  Object 的实例
7. Array.prototype   Object 的实例

************************结论***************************

从任何一个对象开始出发，

按照 __proto__ 开始向上查找，最终都能找到 Object.prototype,

我们管这个使用 __proto__ 串联起来的对象链状结构，叫做原型链。

原型链作用：为了对象访问机制服务。

************************重要结论**************************

1. 每一个函数天生自带一个属性叫做 prototype, 是一个对象。

2. 每一个对象天生自带一个属性叫做 __proto__ , 它指向所属构造函数的prototype。

3. 当一个对象，没有准确的构造函数来实例化的时候，我们都看作是内置构造函数 Obj ect 的实例。

4. prototype里面的constructor属性(构造器)：只有函数天生自带的prototype上才有（自己手动添加的没有），表示是哪一个构造函数所自带的原型对象。作用：判断数据类型。

只要是函数 就是 Function 的实例 

Object.prototype 是顶级原型对象

内置构造函数 Object 是内置构造函数 Function 的一个实例

函数的顶级是内置构造函数 Function

对象是谁(哪个构造函数)的实例，它的__proto__就指向谁的原型对象(构造函数的prototype)

原型链的顶端是 Object.prototype    

Object.prototype.__proto__   === null    是一个空对象

关于原型和原型链的面试

什么是原型?

原型：是每一个函数天生自带的一个空间（属性），原型里定义的属性和方法构造函数的所有实例都可以使用（里面的方法是为了让实例使用的，多个实例共享方法的）。

什么是原型链？

原型链：从任何一个对象出发，按照__proto__串联起来的对象链状结构，为了对象访问机制而存在。

PS: 原型和原型链没有必然的联系

ES6 中的 class ：

ES6 中的 class 可以看作是一个语法糖，它的绝大部分功能 ES5 都能做到。

class People{
    constructor(name) {
        this.name = name;
    }

    sayName() {
        console.log('this.name --> %s', this.name);
    }
}

等同于 👇
People.prototype = {
    constructor() {},
    sayName() {}
}

ES6 的 class：

1. 与ES5中类的不同之处

1.

  • ES6 中类的内部定义的方法是不可枚举的
  • ES5 中类的内部定义的方法是可枚举的

eg.

// ES6 
class Point {
  constructor(x, y) {
    // ...
  }

  toString() {
    // ...
  }
}

Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

// ES5
ar Point = function (x, y) {
  // ...
};

Point.prototype.toString = function () {
  // ...
};

Object.keys(Point.prototype)
// ["toString"]
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

2. ES6 中 类必须使用 new 调用，否则会报错（ES5 中类可以像普通函数一样直接被调用，ES6中直接调用类会报错）

3. ES6 中 类不存在变量提升

2. ES6 class 中的静态方法

  1. 在方法前面加上 static 关键字，表明方法是静态方法。
  2. 静态方法不会被实例继承，而是直接通过类来调用。()
  3. 静态方法可以与非静态方法重名。
  4. 父类的静态方法可以被子类继承。
  5. 子类中可以通过 super 对象来调用父类的静态方法 
    eg.
class Foo {
  static classMethod() {
    return 'hello';
  }
}

// Foo.classMethod() -->静态方法直接通过类调用
// 静态方法也可以看作是构造函数上的一个方法，可以在类内部的非静态方法中通过
// this.constructor.classMethod 来调用

class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}

Bar.classMethod() // "hello, too"

注意：

  • 静态方法不能被实例继承，但能被子类继承。
  • 如果静态方法中使用了 this 关键字，this 指的是类，而不是 实例。
  • 静态方法中只能调用静态方法，不可以调用非静态方法。

ps: 静态方法也可以看作是构造函数上的一个方法，可以在类内部的非静态方法中通过 this.constructor.classMethod 来调用（this指向实例实例时）

3. ES6 class 中实例属性的写法：

两种方式：
第一种：在 constructor 里面定义
class Test1{
    constructor() {
        this.count = 0;
    }
}

第二种：在 class 的顶部定义
这样写的好处：
所有类的实例的属性都写到顶部，比较整齐，一眼就能看出实例可以拥有哪些属性，也比较简洁而
class Test2{
    _count = 0; //注意不要写 this！
    constuctor() {}
}

4. ES6 class 中的静态属性：

静态属性：定义在 class 类上面的属性，而不是定义在实例上面的属性。

  1. 静态属性不会被实例继承,但可以被子类继承。

在变量前面加上 static , 并且需要采用变量写到class顶部的方式 (但其实也只是提案，如果想要使用，可以通过 babel 编译)

eg.

class Test{
  static _count = 0;
  constructor() {

  }
}

var t = new Test();
console.log('t._count ：%s', t._count);//undefined
console.log('Test._count', Test._count);//0

另一种方式（老写法）：

class Foo{
    constructor() {}
}
Foo._count = 0; //易被忽略

5. 私有属性/方法

私有属性/方法：只能在类的内部使用的属性/方法。

1. 通过变量命名，约定以_开头的属性/方法是私有的。

2. 通过 Symbol 

onst bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{

  // 公有方法
  foo(baz) {
    this[bar](baz);
  }

  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }

  // ...
};

3. 一个私有属性/方法的提案：在私有属性/方法前面加上“  #  ”

  1. 注意: 私有属性/方法 只能在类的内部使用，实例不可以直接使用 
  2. 私有属性/方法前可以添加 static ， 即变为 静态私有属性/方法，这样就只能通过类调用静态私有方法，只能通过类访问静态私有属性
class Foo {
  #a;
  #b;
  constructor(a, b) {
    this.#a = a;
    this.#b = b;
  }
  #sum() {
    return this.#a + this.#b;
  }
  printSum() {
    console.log(this.#sum());
  }
}

var foo = new Foo('a', 'b');
foo.#a // 报错，因为#a是类的私有属性，实例不可以访问
foo.#sum() // 报错，因为#sum是类的私有方法，实例不可以调用

ps: 其他实现私有变量的具体方法 CSDN (除了提案的其他方式)

6. ES6的新属性 new.target 

new.target 作用：用来确定构造函数是怎么调用的（指向当前正在运行的函数）

如果构造函数不是通过new命令或Reflect.construct()调用的，new.target会返回undefined

ps：只能在函数内部使用

7. 

不学无术小垃圾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript---原型链（ES6 class类继承）
白云的心的博客
03-31 644
JavaScript—原型链继承 class的本质以及继承链 每个对象都有__proto__属性，指向其构造函数的 prototype 属性。class 构造实例对象，所以其本质依旧是函数，函数同时拥有 prototype 属性和 proto 属性。 class的原型链示例： class A {} var a = new A(); /* ES6的class（非继承）的prototype...
【ES6 & JS】构造函数、原型和原型链
weixin_42337982的博客
07-18 539
构造函数、原型与原型链
菜鸟看前端（深入了解es6的class，原型原型链）
weixin_45891146的博客
12-27 358
ES6class ES6引入了Class（类）这个概念，通过class关键字可以定义类。该关键字的出现使得其在对象写法上更加清晰，更像是一种面向对象的语言。 class Person{//定义了一个名字为Person的类 constructor(name,age){//constructor是一个构造方法，用来接收参数 this.name = name;//this代表的是实例对象 this.age=age; } say(){
ES6 原型链
weixin_40384952的博客
07-29 233
原型链
ES6--原型及原型链
JQ_zhong
04-27 1043
1、构造函数和原型prototype （1）原型prototype：每个构造函数都有一个prototype属性，指向一个对象。prototype的本质也是一个JavaScript对象，称为原型对象，这个对象的所有属性和方法都会被构造函数所拥有。因此，可将共用的一些方法直接定义在prototype上，这样所有对象实例就可以共享这些方法； （2)作用：原型prototype的作用是共享方法、节约内存；...
ES6 class语法糖与ES5的原型链
MK.Gao Blog
06-05 968
ES5    function Obj(){}    var person=new Obj();    person.__proto__.constructor===Obj.prototype.constructor;    Object.getPrototypeOf(person)===Obj.prototype;ES 6    class Obj{    constructor(){}}cla...
JS继承和原型链，ES6新继承（class，extends，super)
qq_44638443的博客
12-12 755
JS继承和原型链，ES6新继承（class，extends，super)
JavaScript设计模式之原型模式分析【ES5与ES6】
10-18
每个对象都有一个指向它的原型对象的内部链接，当访问一个对象的属性或方法时，如果在当前对象中找不到，那么就会沿着原型链向上查找，直到找到一个匹配的属性或方法或者到达原型链的末端。 在ES5中，原型继承可以...
前端面试：es6&class继承&解构赋值
奖励你一朵小红花❀的博客
12-16 578
es6解构赋值 定义： 语法： var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 //对象解构 ({ a, b } = { a: 10, b: 20 }); console.log(a); // 10 console.log(b); // 20 // ...rest 解构数组 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a); // 1
详解js中的原型，原型对象，原型链
11-20
它涉及到函数的`prototype`属性、原型对象以及原型链。让我们深入理解这些概念。 首先，每个函数在创建时都会自动获得一个`prototype`属性，这个属性是一个对象，用于存放可以被该函数实例共享的属性和方法。在例子...
es6 — class 类,原型，原型链
bug_caicai的博客
12-12 473
es6类class的简单总结
ES6 原型和原型链
m0_55990909的博客
05-13 720
1、构造函数和原型 prototype （1）原型prototype：每个构造函数都有一个prototype属性，指向一个对象。prototype的本质也是一个JavaScript对象，称为原型对象，这个对象的所有属性和方法都会被构造函数所拥有。因此，可将共用的一些方法直接定义在prototype上，这样所有对象实例就可以共享这些方法； （2)作用：原型prototype的作用是共享方法、节约内存； // 1、构造函数 function Star(uname, age) { this
es6的原型和原型链
肖帅的博客
03-23 1414
es6的原型和原型链的关系图如下所示。 ①每个函数都有一个prototype属性，这个属性会指向一个对象，就是通过调用该构造函数而创建的实例原型，可以通过实例对象的__proto__来访问到这个原型对象。 ②实例在创建时，就会默认关联原型，并且会从原型继承属性。 ③而每一个原型对象有都会存在一个constructor属性，这个属性会指向关联的这个构造函数。 ④当访问一个实例对象的属性时，如果说这个...
Es6Class类与原型
q515518的博客
09-14 489
Es6Class类以及原型
ES6与class类+原型与原型链+promise
weixin_49879445的博客
11-24 497
ES6 与 class “类”` ## class类 Es5如果要要生成一个对象实例，，需要先定义一个构造函数，然后通过new操作符来完成。 Es6引入clss“类”这个概念通过class关键字可以定义累 ## ES5中的继承 （组合继承:原型链继承 + 借用构造函数) 原型链继承： 1.父类的实例作为子类的原型 借用构造函数继承： 2在子类内,使用call()调用父类方法,并将父类的this修改为子类的this. 相当于是把父类的实例属性复制了一份放到子类的函数内. 组合继承: 3.既能
ES6学习——类语法：继承中的原型链
Challenge Next Challenge
01-11 3076
上篇文章中我们讲了些类的基本概念，其中提到ES6中的类语法是对原型继承的一种封装。JS的原型继承一共有两条原型链，显示和隐式，那么在类继承的语法中，这两条原型链又是怎么样的呢？ 继续使用上篇文章中的例子： class Point{...} class ColorPoint extends Point{...} var p = new Point(...),cp = new ColorPoi
原型对象和原型链的理解
m0_46978034的博客
05-09 243
大家都应该知道构造函数很好用。但是构造函数也存在浪费内存的问题。 function Star(uname, age) { this.uname = uname; this.age = age; this.sing = function() { console.log('我会唱歌'); } } var ldh = new Star('刘德华', 18); var zxy = new Star('张学友', 19); 在图中我们可以看出来只要我们实例化出一个对象里面的sing方法都是一样得不管我们实例化多
原型链图谱（包含es6类和类的继承）
大湿胸的博客
11-21 452
Es6原型和原型链！！
最新发布
2302_77399796的博客
10-31 71
既然原型对象也是对象，那原型对象的原型对象，就也是Object.prototype。到这里，就可以回答前面那个问题了，如果某个对象查找属性，自己和原型对象上都没有，那就会继续往原型对象的原型对象上去找，这个例子里就是Object.prototype，这里就是查找的终点站了，在这里找不到，就没有更上一层了（null里面啥也没有），直接返回。既然这个是对象类型的属性，而原型对象也是对象，那么原型对象就也有这个属性，但是原型对象的。的属性，这个属性指向的是一个对象，就是所谓的原型对象。属性，指向它的构造函数。
揭秘ES6 class实现原理：构造函数与原型链的进化
总结来说，ES6的`class`关键字提供了一种更直观和易于理解的方式来定义和继承类，尽管它的实现原理仍然依赖于构造函数和原型链，但隐藏了这些细节，使得代码更加简洁。开发者可以利用`class`的语法特性，更好地组织...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值