面向对象的原型及原型链

最新推荐文章于 2024-05-12 22:40:26 发布

__Ailsa__

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量117

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/cxx_sunshine/article/details/130699665

版权

基本概念

面向对象三大核心: 封装继承多态

创建对象的方式

1.字面量方式创建对象

       var obj = {
            uname: '大帅锅',
            age: 25,
            sex: '男',
            sayHi: function () {
                console.log('hi~');
            }
        }

2. new object创建对象

        var obj = new Object();
        obj.uname = '大帅锅';
        obj.age = 25;
        obj.sex = '男';
        obj.sayHi = function () {
            console.log('hi~');
        }

3.构造函数创建对象

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}

var p1 = new Person('大帅锅', 25)
p1.sayName() // => 大帅锅

var p2 = new Person('更帅的', 23)
p2.sayName() // => 更帅的

继承的几种方式

1.原型链继承

利用原型让一个引用类型继承另一个引用类型的属性和方法

让一个构造函数的原型是另一个类型的实例，那么这个构造函数new出来的实例就具有该实例的属性。

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

// 原型对象
function Parent() {
   this.isShow = true
   this.info = {
       name: "mjy",
       age: 18,
   };
}
 
Parent.prototype.getInfo = function() {
   console.log(this.info);
   console.log(this.isShow);
}
 
function Child() {};
Child.prototype = new Parent();
 
let Child1 = new Child();
Child1.info.gender = "男";
Child1.getInfo(); // {name: 'mjy', age: 18, gender: '男'} ture
 
let child2 = new Child();
child2.isShow = false
console.log(child2.info.gender) // 男
child2.getInfo(); // {name: 'mjy', age: 18, gender: '男'} false

优点：写法方便简洁，容易理解。

缺点：对象实例共享所有继承的属性和方法。传教子类型实例的时候，不能传递参数，因为这个对象是一次性创建的（没办法定制化）。

2.借用构造函数继承

在子类型构造函数的内部调用父类型构造函数；使用 apply() 或 call() 方法将父对象的构造函数绑定在子对象上。


function Parent(gender) {
  this.info = {
    name: "yhd",
    age: 19,
    gender: gender
  }
}
 
function Child(gender) {
    Parent.call(this, gender)
}
 
let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
console.log(child1.info);
 
let child2 = new Child('女');
console.log(child2.info);

优点：解决了原型链实现继承的不能传参的问题和父类的原型共享的问题。

缺点：借用构造函数的缺点是方法都在构造函数中定义，因此无法实现函数复用。在父类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。

3.组合继承（经典继承）

将 原型链 和 借用构造函数 的组合到一块。使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又能够保证每个实例都有自己的属性

function Person(gender) {
  console.log('执行次数');
  this.info = {
    name: "mjy",
    age: 19,
    gender: gender
  }
}
 
Person.prototype.getInfo = function () {   // 使用原型链继承原型上的属性和方法
  console.log(this.info.name, this.info.age)
}
 
function Child(gender) {
  Person.call(this, gender) // 使用构造函数法传递参数
}
 
Child.prototype = new Person()
 
let child1 = new Child('男');
child1.info.nickname = 'xiaoma'
child1.getInfo()
console.log(child1.info); // xiaoma 男
 
let child2 = new Child('女');
console.log(child2.info); // xiaoma 女

优点: 解决了原型链继承和借用构造函数继承造成的影响。

缺点: 无论在什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部

4.原型式继承

方法一

借用构造函数在一个函数A内部创建一个临时性的构造函数，然后将传入的对象作为这个构造函数的原型，最后返回这个临时类型的一个新实例。

本质上，函数A是对传入的对象执行了一次浅复制。


function createObject(obj) {
  function Fun() {}
  Fun.prototype = obj
  return new Fun()
}
 
let person = {
  name: 'mjy',
  age: 18,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is:', this.name)
  }
}
 
let child1 = createObject(person)
child1.name = 'xxxy'
child1.hoby.push('rap')
let child2 = createObject(person)
 
console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

方法二：Object.create()

Object.create() 是把现有对象的属性，挂到新建对象的原型上，新建对象为空对象

ECMAScript 5通过增加Object.create()方法将原型式继承的概念规范化了。这个方法接收两个参数：作为新对象原型的对象，以及给新对象定义额外属性的对象（第二个可选）。在只有一个参数时，Object.create()与这里的函数A方法效果相同。

let person = {
  name: 'mjy',
  age: 19,
  hoby: ['唱', '跳'],
  showName() {
    console.log('my name is: ', this.name)
  }
}
 
let child1 = Object.create(person)
child1.name = 'xxt'
child1.hoby.push('rap')
let child2 = Object.create(person)
 
console.log(child1)
console.log(child2)
console.log(person.hoby) // ['唱', '跳', 'rap']

优点是：不需要单独创建构造函数。

缺点是：属性中包含的引用值始终会在相关对象间共享，子类实例不能向父类传参

5.寄生式继承

寄生式继承的思路与(寄生) `原型式继承` 和 `工厂模式` 似, 即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。

function objectCopy(obj) {
  function Fun() { };
  Fun.prototype = obj;
  return new Fun();
}
 
function createAnother(obj) {
  let clone = objectCopy(obj);
  clone.showName = function () {
    console.log('my name is：', this.name);
  };
  return clone;
}
 
let person = {
     name: "mjy",
     age: 18,
     hoby: ['唱', '跳']
}
 
let child1 = createAnother(person);
child1.hoby.push("rap");
console.log(child1.hoby); // ['唱', '跳', 'rap']
child1.showName(); // my name is： mjy
 
let child2 = createAnother(person);
console.log(child2.hoby); // ['唱', '跳', 'rap']

优点：写法简单，不需要单独创建构造函数。

缺点：通过寄生式继承给对象添加函数会导致函数难以重用。使用寄生式继承来为对象添加函数, 会由于不能做到函数复用而降低效率;这一点与构造函数模式类似.

6..ES6、Class实现继承

原型原型链

对于原型和原型链，我们要知道一下几个：函数对象，实例对象、原型对象

1）函数对象——就是平时称的对象；

2）实例对象——new出的对象或者{ }；

3）原型对象——所有的函数对象都有一定有一个对应的原型对象，所有的原型对象都是被Object函数对象创建出来的。

一、构造函数

构造函数和普通函数本质上没什么区别，只不过使用了new关键字创建对象的函数，被叫做了构造函数。构造函数的首字母一般是大写，用以区分普通函数，当然不大写也不会有什么错误。

function Person(name, age) {
   	this.name = name;
   	this.age = age;
    this.species = '人类';
    this.say = function () {
        console.log("Hello");
    }
}

let per1 = new Person('xiaoming', 20);

二、原型对象

在js中，每一个函数类型的数据，都有一个叫做prototype的属性，这个属性指向的是一个对象，就是所谓的原型对象。

在这里插入图片描述

对于原型对象来说，它有个constructor属性，指向它的构造函数。

那么这个原型对象有什么用呢？最主要的作用就是用来存放实例对象的公有属性和公有方法。

在上面那个例子里species属性和say方法对于所有实例来说都一样，放在构造函数里，那每创建一个实例，就会重复创建一次相同的属性和方法，显得有些浪费。这时候，如果把这些公有的属性和方法放在原型对象里共享，就会好很多。

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.species = '人类';
Person.prototype.say = function () {
    console.log("Hello");
}

let per1 = new Person('xiaoming', 20);
let per2 = new Person('xiaohong', 19);

console.log(per1.species); // 人类 
console.log(per2.species); // 人类

per1.say(); // Hello
per2.say(); // Hello

可是这里的species属性和say方法不是实例对象自己的，为什么可以直接用点运算符访问？这是因为在js中，对象如果在自己的这里找不到对应的属性或者方法，就会查看构造函数的原型对象，如果上面有这个属性或方法，就会返回属性值或调用方法。所以有时候，我们会用per1.constructor查看对象的构造函数：

console.log(per1.constructor); // Person()

这个constructor是原型对象的属性，在这里能被实例对象使用，原因就是上面所说的。那如果原型对象上也没有找到想要的属性呢？这就要说到原型链了。

三、原型链

说原型链之前，先来了解两个概念：

1. 显示原型

显示原型就是利用prototype属性查找原型，只是这个是函数类型数据的属性。

2. 隐式原型

隐式原型是利用__proto__属性查找原型，这个属性指向当前对象的构造函数的原型对象，这个属性是对象类型数据的属性，所以可以在实例对象上面使用：

console.log(per1.__proto__ === Person.prototype); // true
console.log(per2.__proto__ === Person.prototype); // true

根据上面，就可以得出constructor、prototype和__proto__之间的关系了：

在这里插入图片描述

3. 原型链

既然这个是对象类型的属性，而原型对象也是对象，那么原型对象就也有这个属性，但是原型对象的__proto__又是指向哪呢？

我们来分析一下，既然原型对象也是对象，那我们只要找到对象的构造函数就能知道__proto__的指向了。而js中，对象的构造函数就是Object()，所以对象的原型对象，就是Object.prototype。既然原型对象也是对象，那原型对象的原型对象，就也是Object.prototype。不过Object.prototype这个比较特殊，它没有上一层的原型对象，或者说是它的__proto__指向的是null。

所以上面的关系图可以拓展成下面这种：
在这里插入图片描述

到这里，就可以回答前面那个问题了，如果某个对象查找属性，自己和原型对象上都没有，那就会继续往原型对象的原型对象上去找，这个例子里就是Object.prototype，这里就是查找的终点站了，在这里找不到，就没有更上一层了（null里面啥也没有），直接返回undefined。

可以看出，整个查找过程都是顺着__proto__属性，一步一步往上查找，形成了像链条一样的结构，这个结构，就是原型链。所以，原型链也叫作隐式原型链。

正是因为这个原因，我们在创建对象、数组、函数等等数据的时候，都自带一些属性和方法，这些属性和方法是在它们的原型上面保存着，所以它们自创建起就可以直接使用那些属性和方法。

函数也是一种对象

函数在js中，也算是一种特殊的对象，所以，可以想到的是，函数是不是也有一个__proto__属性？答案是肯定的，既然如此，那就按上面的思路，先来找找函数对象的构造函数。

在js中，所有函数都可以看做是Function()的实例，而Person()和Object()都是函数，所以它们的构造函数就是Function()。Function()本身也是函数，所以Function()也是自己的实例，听起来既怪异又合理，但是就是这么回事。

console.log(Person.constructor === Function); // true
console.log(Object.constructor === Function); // true
console.log(Function.constructor === Function); // true

既然知道了函数的构造函数，那么函数的__proto__指向我们也就知道了，就是Function.prototype。

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

根据这几个结论，我们就能拓展出一张更大的关系图了：

在这里插入图片描述

总结

构造函数是使用了new关键字的函数，用来创建对象，所有函数都是Function()的实例
原型对象是用来存放实例对象的公有属性和公有方法的一个公共对象，所有原型对象都是Object()的实例
原型链又叫隐式原型链，是由__proto__属性串联起来，原型链的尽头是Object.prototype

引用文章：原型和原型链_Dinmunh的博客-CSDN博客

__Ailsa__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
面向对象的原型及原型链

构造函数是使用了new关键字的函数，用来创建对象，所有函数都是Function()的实例原型对象是用来存放实例对象的公有属性和公有方法的一个公共对象，所有原型对象都是Object()的实例原型链又叫隐式原型链，是由__proto__属性串联起来，原型链的尽头是Object.prototype原型和原型链_Dinmunh的博客-CSDN博客。
复制链接

扫一扫