js原型与继承

更新日期: 2020-03-18阅读: 1.6k标签: 原型

一、什么是继承

继承是面向对象语言的一个重要概念。许多面向对象语言都支持两种继承方式:接口继承和实现继承;接口继承只继承方法签名,而实现继承则继承实际的方法。由于函数没有签名,所以ECMAScript只支持实现继承,而实现继承主要是依靠原型链来实现的。


二、继承的多种方法分析

(一)原型继承

基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法;

function Animal() {
  this.species = '动物'
  this.colors = ['白色']
}
function Cat(name, eat) {
   this.name = name
   this.eat = eat
}
Cat.prototype = new Animal()
var cat1 = new Cat('猫', '老鼠')
console.log(cat1.species)  //动物
console.log(cat1.colors)  //['白色']

存在的问题:

cat1.colors.push('黑色')
cat1.colors  //['白色', '黑色']
cat2.colors  //['白色', '黑色']

当tCat通过原型链继承了Animal后,Cat.prototype就变成了Animal的一个实例,因此它也拥有了一个自己的colors属性,结果:Cat的所有的实例都会共享colors属性;

(二)构造函数继承

基本思想:在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象,因此可通过使用call()和apply()在新创建的对象上执行构造函数

function Cat(name, eat) {
  Animal.apply(this, arguments)
  this.name  = name
  this.eat = eat
}

var cat1 = new Cat('猫', '鱼')

console.log(cat1.species)  //动物
cat1.colors.push('黑色')
console.log(cat1.colors)  //['白色', '黑色']
var cat2 = new Cat('猫', '猫粮')
console.log(cat2.colors)  //['白色']

存在问题:方法都在构造函数中定义,所以没法利用函数的复用;并且在超类型的原型中定义的方法对于子类型而言是不可见的。

function Animal() {
    this.species = '动物'
    this.colors = ['白色']
  }
Animal.prototype.getColor = function() {
    return this.colors
}
function Cat(name, eat) {
  Animal.apply(this, arguments)
  this.name  = name
  this.eat = eat
}

var cat1 = new Cat('猫', '鱼')
cat1.getColor()   //报错:cat1.getColor is not a function

(三)组合继承

基本思想:使用原型链实现对原型属性和方法的继承,而通过构造函数实现对实例属性的继承;

function Animal(species) {
  this.species = species
  this.colors = ['白色']
  }
Animal.prototype.getColor = function() {
  console.log(this.colors)
}
function Cat(name, eat) {
  this.name = name
  this.eat = eat
   // 继承属性
  Animal.call(this, name)
}
// 继承方法
Cat.prototype = new Animal();
// 此时Cat.prototype.constructor => Animal
Cat.prototype.constructor = Cat;

Cat.prototype.sayName = function() {
  console.log(this.name)
}
var cat1 = new Cat('猫', '吃鱼')

cat1.colors.push('黑色')
console.log(cat1.colors)  //['白色', '黑色']
cat1.getColor()  //['白色', '黑色']
cat1.sayName()  //'猫'

var cat2 = new Cat('波斯猫', '吃猫粮')
console.log(cat2.colors)  //['白色']
cat2.getColor() //['白色']
cat2.sayName() //'波斯猫'
本文转载自 雅昕的博客园文章  


链接: https://www.fly63.com/article/detial/8278

JS的原型链的理解。

JS是一个非常有魅力的语言也是一个比较烦人的语言,主要就是因为他的特殊性灵活性。JS的原型链,需要深刻的研究才能搞懂。不要纠结细节吧。实在不行就按这个死背住,慢慢就理解了。总之吧就是一句话万物皆对象。

JavaScript 原型的深入指南

不学会怎么处理对象,你在 JavaScript 道路就就走不了多远。它们几乎是 JavaScript 编程语言每个方面的基础。事实上,学习如何创建对象可能是你刚开始学习的第一件事。

JavaScript原型深入浅出

不学会怎么处理对象,你在 JavaScript 道路就就走不了多远。它们几乎是 JavaScript 编程语言每个方面的基础。事实上,学习如何创建对象可能是你刚开始学习的第一件事。

javascript中的prototype和__proto__的理解

在工作中有时候会看到prototype和__proto__这两个属性,对这两个属性我一直比较蒙圈,但是我通过查阅相关资料,决定做一下总结加深自己的理解

理解Js原型和原型链

在JS中,函数的本质就是对象,它与其他对象不同的是,创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢?是一个叫做Function的特殊函数,通过new Function 产生的对象就是一个函数。

JS原型解析

JS中原型是为了实现代码重用的一种仿类机制,不过它跟类又完全不同。它通过给对象添加原型关系(即给某个对象添加__proto__属性)实现一个关联。把共有的方法和属性放到这个关联上即实现了JS的继承。简单来说就是一种委托机制

js中__proto__与prototype的关系

了解JavaScript中原型以及原型链只需要记住以下2点即可:对象都有__proto__属性,指向构造函数的prototype;构造函数\\函数都有prototype属性,指向构造函数的原型

js原型链的看法

对象:1,函数对象:有function创造出来的函数2,普通对象:除开函数对象之外的对象,都是普通对象**即普通对象obj是构造函数Object的一个实例,因此:

Js原型到原型链

每个函数都有一个 prototype 属性,函数的 prototype 属性指向了一个对象,这个对象正是调用该构造函数而创建的实例的原型,也就是这个例子中的 cat 和dog 的原型。

Js原型对象

这里不介绍原型链。javascript 中有若干长得跟prototype,proto很想的属性/函数,这里简单总结一下他们都是啥,哪个是原型对象,哪个不是。[[Prototype]]这个对象的一个内置槽,对程序员是不可见

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!