原型与原型链

100 阅读3分钟

1、对象

  • 属性无序
  • key都是string类型
let obj = {};
obj[1]=1;
obj['1']=2;

2、对象结构

function foo(){};
foo.prototype.z=3;
let obj = new foo();
obj.x=1;
obj.y=2;

function foo(){};
let obj = new foo();

function foo(){};
foo.prototype.z=3;
let obj = new foo();

3、创建对象的方式

  • {}
  • new/原型链
  • Object.create
function foo(){};
foo.prototype.z=3;

let obj = new foo();
obj.x=1;
obj.y=2;

function foo(){};
foo.prototype.z=3;
let obj = new foo();
obj.x=1;
obj.y=2;
obj.z=10000;

  • Object.create
let obj = Object.create({x:1});

4、get set方法

let man = {
  name:'gsy',
  get age(){
    return new Date().getFullYear() - 1995
  },
  set age(val){
    console.log('set', val)
  }
}
man.age
man.age = 1000

5、OOP 面向对象编程

  • 继承
  • 封装
  • 多态
  • 抽象

Foo.prototype 有两个属性constructor和 _proto_

6、静态方法与原型链方法

function Foo() {
  getName = function () {
    alert(1);
  };
  return this;
}
debugger
getName(); // Uncaught ReferenceError: getName is not defined   at <anonymous>:8:1

Foo.getName = function () {
  alert(2);
};
Foo.prototype.getName = function () {
  alert(3);
};
getName = function () {
  alert(4);
};

// 请写出下面的输出结果
getName(); // 4
Foo.getName(); // 静态方法  2
new Foo().getName(); // 原型链方法 3

7、对象继承的方式

  1. 以原型链的方式来实现继承
  2. 使用借用构造函数的方式
  3. 组合继承,组合继承是将原型链和借用构造函数组合起来使用的一种方式
  4. 原型式继承
  5. 寄生式继承
  6. 寄生式组合继承

8、原型和原型链的理解

  1. _proto_和constructor对象才有
  2. prototype 函数才有

js中使用构造函数来新建一个对象,每个构造函数的内部都有一个prototype属性(它的属性值是一个对象,包含了可以由该构造函数的所有实例共享的属性和方法)。

  1. 对象的原型: 当使用构造函数新建一个对象后,在这个对象的内部将包含一个指针,这个指针成为对象的原型(proto),这个指针指向的是构造函数的prototype。

  2. Object.getPrototypeOf():获取对象的原型

  3. 原型链: 当访问对象的属性时,如果内部不存在这个属性,就会去它的原型对象上去找,原型对象又会存在原型,于是就这样一直找下去,也就是原型链的概念。

9、图解原型和原型链

image.png 1.__proto__、 constructor属性是对象所独有的; 2.prototype属性是函数独有的;

1.prototype属性

为了方便举例,我们在这模拟一个场景,父类比作师父,子类比作徒弟。师父收徒弟,
徒弟还可以收徒弟。徒弟可以得到师父传授的武功,然后徒弟再传给自己的徒弟。
师父想要传授给徒弟们的武功就放到“prototype”这个琅琊福地中。徒弟徒孙们就去这里学习武功。

prototype属性可以看成是一块特殊的存储空间,存储了供“徒弟”、“徒孙”们使用的方法和属性。

image.png

2.proto属性

__proto__属性相当于通往prototype(“琅琊福地”)唯一的路(指针)
让“徒弟”、“徒孙” 们找到自己“师父”、“师父的师父” 提供给自己的方法和属性

image.png

3.constructor属性

constructor属性是让“徒弟”、“徒孙” 们知道是谁创造了自己,这里可不是“师父”啊
而是自己的父母,父母创造了自己,父母又是由上一辈人创造的,……追溯到头就是Function() 【女娲】。

image.png