JS原型继承四步曲及原型继承图一览

2024-09-27 23:10:30

一：js原型继承四步曲

//js模拟类的创建以及继承
 //动物（Animal），有头这个属性，eat方法
 //名字这个属性
 //猫有名字属性，继承Animal，抓老鼠方法

 //第一步：创建父类
 function Animal(name){
  this.name = name;
 }
 //给父类添加属性方法
 Animal.prototype.eat = function(){
  console.log(this.name + " eating...");

 }
 //第二步：创建子类
 function Cat(name){
  Animal.call(this,name);

 }
 //第三步：确定继承的关系
 Cat.prototype = Object.create(Animal.prototype);

 //第四步：改造构造器
 //改变了某个构造器的原型之后，紧接着的代码一定是改构造器
 Cat.prototype.constructor = Cat;

 Cat.prototype.zhualaoshu = function(){
  console.log(this.name + " 抓 老鼠");
 }

 var mao = new Cat("猫");
 mao.eat();
 mao.zhualaoshu();

二： 原型继承图

下图辅助理解

练习提巩固理解、

函数Foo的__proto的值等于Foo.prototype,对吗？	不对
Object的prototype可以修改吗？能与不能原因是什么	不可以
顶级constructor是谁？	Function()
顶级原型对象是谁？	Object.prototype
对象的construtor成员是个属性还是个方法？	方法
Function有没有__proto__,为什么？值等于Object.prototype吗？	有，是Function.prototype;
所有的构造器的__proto__都等于其对应的prototype	不对
创建类形式的继承的四部曲是什么？	创建父类——>创建子类——>确定继承关系——>改构造器
Function的constructor与prototype值可以修改吗？	可以
Object.prototype === Object.__proto__吗？	不对
Function.prototype === Function.__proto__吗？	是
function F(){}; var f1 = new F();f1.__proto__ === Object.prototype吗？	不对

以上这篇JS原型继承四步曲及原型继承图一览就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

JavaScript的原型继承详解

JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他两个容后再讲. JavaScript的继承和C++的继承不大一样,C++的继承是基于类的,而JavaScript的继承是基于原型的. 现在问题来了. 原型是什么?原型我们可以参照C++里的类,同样的保存了对象的属性和方法.例如我们写一个简单的对象复制代码代码如下: function Animal
JavaScript中的原型和继承详解(图文)

请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans 原型车.这些车虽然是由"奥迪"或"标致"这些厂商制造的,可它们并不是你在街上或速公路上所见到的那类汽车.它们是专为参加高速耐力赛事而制造出来的. 厂家投入巨额资金,用于研发.设计.制造这些原型车,而工程师们总是努力尝试将这项工程做到极致.他们在合金.生物燃料.制动技术
js原型继承的两种方法对比介绍

在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上.最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类. 而在继承的时候有两种常用方式,今天我们就来稍作探讨复制代码代码如下: //父类 function Person(name){ this.name = name;}; // 子类 function Student(sex){ Person.apply(this,arguments); //继承父类的构造函数 this.s
JS原型继承四步曲及原型继承图一览

一:js原型继承四步曲 //js模拟类的创建以及继承 //动物(Animal),有头这个属性,eat方法 //名字这个属性 //猫有名字属性,继承Animal,抓老鼠方法 //第一步:创建父类 function Animal(name){ this.name = name; } //给父类添加属性方法 Animal.prototype.eat = function(){ console.log(this.name + " eating..."); } //第二步:创建子类 functi
[js高手之路]从原型链开始图解继承到组合继承的产生详解

于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 function Person(){ this.userName = 'ghostwu'; } Person.prototype.showUserName = function(){ return this.userName; } function Teacher (){} Teacher.protot
JS继承--原型链继承和类式继承

什么是继承啊?答:别人白给你的过程就叫继承. 为什么要用继承呢?答:捡现成的呗. 好吧,既然大家都想捡现成的,那就要学会怎么继承! 在了解之前,你需要先了解构造函数.对象.原型链等概念...... JS里常用的两种继承方式: 原型链继承(对象间的继承)类式继承(构造函数间的继承) 原型链继承: 复制代码代码如下: //要继承的对象var parent={name : "baba" say : function(){ alert("I am baba");}} //
浅析JS原型继承与类的继承

我们先看JS类的继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS类的继承</title> </head> <body> /* -- 类式继承 -- */ <script type="text/javascript"> //先声明一个超类 var Animal = function
JS学习笔记之原型链和利用原型实现继承详解

本文实例讲述了JS学习笔记之原型链和利用原型实现继承.分享给大家供大家参考,具体如下: 原型链原型链是一种关系,实例对象和原型对象之间的关系,关系是通过原型(__proto__)来联系的实例对象中有__proto__,是对象,叫原型,不是标准的属性,浏览器使用,并且有的游览器不支持构造函数中有prototype属性,也是对象,叫原型注意原型中的方法是可以互相访问的实例代码 function Animal(name,age){ this.name=name; thia.age=age;
JavaScript原型链及常见的继承方法

目录原型链原型链的概念原型链的问题几种常见的继承方法盗用构造函数组合继承原型式继承寄生式继承寄生组合式继承原型链原型链的概念在JavaScript中,每一个构造函数都有一个原型,这个原型中有一个属性constructor会再次指回这个构造函数,这个构造函数所创造的实例对象,会有一个指针(也就是我们说的隐式原型__proto__或者是浏览器中显示的[[Prototype]])指向这个构造函数的原型对象.如果说该构造函数的原型对象也是由另外一个构造函数所创造的实例,那么该构造
javascript原型链学习记录之继承实现方式分析

本文实例讲述了javascript原型链学习记录之继承实现方式.分享给大家供大家参考,具体如下: 在慕课网学习继承的笔记: 继承的几种方式: ① 使用构造函数实现继承 function Parent(){ this.name = 'parent'; } function Child(){ Parent.call(this); //在子类函数体里面执行父类的构造函数 this.type = 'child';//子类自己的属性 } Parent.call(this),this即实例,使用this执行
JS高级ES6的6种继承方式

目录 1.原型链继承 2.借助构造函数继承 3.组合式继承 4.原型式继承 5.寄生式继承 6.寄生组合式继承前言: 继承是面向对象中老生常谈的一个内容,在ECMAScript6之前,JavaScript中的继承可谓是非常的繁琐的,有各种各样的继承,本质上所有的继承都是离不开原型链的,ES6新增的extends关键字也是通过原型链实现的继承,但是语法相对来说就简单了很多. 关于原型链的内容,可以参考上篇文章两张图搞懂原型链本篇文章就来介绍一下在ECMAScript6之前是怎么实现继承的. 1
js封装可使用的构造函数继承用法分析

本文实例讲述了js封装可使用的构造函数继承用法.分享给大家供大家参考.具体如下: 先来看下面这段代码 (YUI)库所用的方法: 复制代码代码如下: function extend(Child, Parent) { var F = function(){}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; Child.uber = Parent.prot
js类式继承与原型式继承详解

本文实例为大家分享了js类式继承与原型式继承相关代码,供大家参考,具体内容如下 1.js类式继承 /* -- 类式继承 -- */ //先声明一个超类 function Person(name) { this.name = name; } //给这个超类的原型对象上添加方法 getName Person.prototype.getName = function() { return this.name; } //实例化这个超 var a = new Person('Darren1') conso

JS原型继承四步曲及原型继承图一览

相关推荐

随机推荐