原型的作用:1.将公共部分放入原型中,这样构造出的多个实例对象的公共部分只会占用一个公共空间,实现数据共享和节省内存空间
2.通过原型实现继承:构造函数模拟 "类"这个面向对象的概念,JS基于对象,基于构造函数的原型对象实现继承 如何实现继承?
1.改变原型对象的指向:将子类构造函数(B)的prototype指向父类构造函数(A)的一个实例化对象(a),那么这个子类构造函数构造出的实例化对象
(b)就可以访问父类(A)的属性和方法
缺陷:由于B的prototype改变,那么保存在原来的B的prototype里的属性和方法就无法访问了,构造出的b无法获得这些属性和方法
解决方法:先进行原型指向的改变,再定义子类的原型属性和方法,这样子类后定义的原型属性和方法就定义到了父类的实例对象中
 var Person = function(name,sex){
this.name = name;
this.sex= sex;
}
Person.prototype.eat = function () {
console.log("吃");
}; var Student = function(score){
this.score = score;
};
Student.prototype.study = function () {
console.log("学习");
}; Student.prototype = new Person("xiaoming","man"); var stu = new Student(66);
stu.eat(); //可以调用
stu.study() //报错,由于改变了prototype指向,无法寻找到study这个方法

先改变原型指向,后定义原型方法:

 var Person = function(name,sex){
this.name = name;
this.sex= sex;
}
Person.prototype.eat = function () {
console.log("吃");
}; var Student = function(score){
this.score = score;
}; Student.prototype = new Person("xiaoming","man");
Student.prototype.study = function () {
console.log("学习");
}; var stu = new Student(66);
stu.eat(); //可以调用
stu.study(); //可以调用
console.log(Student.prototype);
/* name:"xiaoming"
sex:"man"
study:ƒ () 可以看出后定义的方法写入了Student.prototype即这个new Person实例化对象中了
__proto__:Object 这个隐式原型指向Person.prototype,里面有eat方法
*/

如果使用这个方式实现多代继承,那么每一代都需要先改变原型指向,在定义原型属性和方法。

如果使用这个方式实现多代继承,那么每一代都需要先改变原型指向,在定义原型属性和方法。
在新的原型链中,原本子代的构造函数的prototype消失,新的prototype即是父代的一个实例化对象。
而子代实例对象的__proto__都指向其父代的这个实例化对象,原型链就成为实例化对象之间的指向关系,直到最高级祖先的构造函数的prototype 仍然存在的问题:改变子代prototype的指向,指向父代的一个实例对象,那么这个实例对象的属性和方法就已经被初始化了,即继承过来的属性和方法是已经确定的,无法在构建子代实例化对象时重新初始化这些继承下来的属性和方法
2.借用构造函数实现继承
* 利用call方法或者apply方法借用父代的构造函数
* 在子代构造函数中添加
* 父代构造函数.call(this.父代形参列表)
* 同时也要在子代的形参列表中加入父代的形参列表
* 想当于在子代构造函数中也写了父代构造函数中的定义属性和方法的那些代码
* 所以优点:可以在子代构造函数实例化对象时自己初始化父代的属性和方法,不再是继承到固定的实现和方法
* 所以缺陷:没有在子代的原型和父代原型之间形成原型链,所以无法访问父代原型里的方法和属性
  var Person = function (name) {
this.name= name;
this.say = function () {
console.log("Hi,I am" + this.name);
};
};
Person.prototype.eat = function () {
console.log("吃");
};
Person.prototype.sex = "man"; //父代原型里的属性 var Student= function (score,name) {
this.score = score;
Person.call(this,name);
// Person.apply(this,[name]);
};
Student.prototype.test = function () {
console.log("考试");
}; var stu1 = new Student(80,"小王");
console.log(stu1.name);
stu1.say(); //可以调用父代构造函数里的的属性和方法 console.log(stu1.sex); //undefined
stu1.eat(); //报错------>无法通过借用构造函数的方法继承父类原型里的属性和方法

3.组合继承:结合以上两种方法:

*   1):改变prototype指向(这时不需要再new父代实例化对象时传入参数),子代和父代之间形成原型链,可以继承父代原型里的属性和方法
* 2):借用父代的构造函数,实现继承父代构造函数内的属性和方法,还可以在实例化子代时自己初始化这些属性和方法
    var Person = function (name) {
this.name= name;
this.say = function () {
console.log("Hi,I am" + this.name);
};
};
Person.prototype.eat = function () {
console.log("吃");
};
Person.prototype.sex = "男"; //父代原型里的属性 var Student= function (score,name) {
this.score = score;
Person.call(this,name);
// Person.apply(this,[name]);
};
Student.prototype = new Person();
Student.prototype.test = function () {
console.log("考试");
}; var stu2 = new Student(80,"小王");
console.log(stu2.name);
stu2.say(); //可以调用父代构造函数里的的属性和方法 console.log(stu2.sex);
stu2.eat(); //可以调用父代原型里的属性和方法 console.log(stu2.score);
stu2.test(); //当然可以正常调用子代的属性和方法
												

Js实现继承的方法的更多相关文章

  1. JS 实现继承的方法 ES6 and ES5

    继承 ES6 方法  (类的继承) ES6中有一个属性的 extends 语法: ​ • class Father {} ​ • class Son extends Father{} ​ 注意:是子类 ...

  2. js中继承的方法总结(apply,call,prototype)

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 代码如下: <SPAN style="<SPAN style="FONT-SIZE ...

  3. js 继承 对象方法与原型方法

    js函数式编程确实比很多强语言使用灵活得多,今天抽了点时间玩下类与对象方法调用优先级别,顺便回顾下继承 暂时把原型引用写成继承 先看看简单的两个继承 var Parent = function(){} ...

  4. JS中通过call方法实现继承

    原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...

  5. 各种实现js继承的方法总结

    昨天主要介绍了原型,在js中,原型,原型链和继承是三个很重要的概念,而这几个概念也是面试中经常会被问到的问题,今天,就把昨天还没总结的原型链和继承继续做一个整理,希望大家一起学习,一起进步呀O(∩_∩ ...

  6. js各继承方法的优缺点

    在js中有很多种继承的方法,下面总结这些方法的优缺点. ####1.原型链继承 优点: 非常纯粹的继承关系,实例是子类的实例,也是父类的实例 父类新增原型方法/原型属性,子类都能访问到 简单,易于实现 ...

  7. 由js apply与call方法想到的js数据类型(原始类型和引用类型)

    原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...

  8. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  9. js实现继承的5种方式 (笔记)

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

随机推荐

  1. 使用css3实现动画来开启GPU加速

    参考文章: https://www.w3cplus.com/css3/introduction-to-hardware-acceleration-css-animations.html http:// ...

  2. ./configure -build,-host,-target设置

    build:执行代码编译的主机,正常的话就是你的主机系统.这个参数一般由config.guess来猜就可以.当然自己指定也可以.host:编译出来的二进制程序所执行的主机,因为绝大多数是如果本机编译, ...

  3. Golang学习---常用库

    1. 路由库:github.com/julienschmidt/httprouter 2. mysql驱动:github.com/go-sql-driver/mysql

  4. 编写函数,接受一个string,返回一个bool值,指出string是否有5个或者更多字符,使用此函数打印出长度大于等于5的元素

    #include <algorithm> using namespace std; bool isFive(const string& s1) { return s1.size() ...

  5. huawei USG防火墙子接口技术的应用案例

    网络拓扑: 在中小企业的办公网络的设计中,通常为了安全考虑,需要将不同部门之间的互访的流量经过防火墙中转,同时结合vpn stance将业务进行隔离,在本例中,使用两台USG防火墙做HA作为整个办公网 ...

  6. 词根:lun = moon, 表示“月亮”

    词根:lun = moon, 表示“月亮” lunar [lun月亮,-ar形容词后缀,…的] 月亮的,太阴的,似月的,新月形的 semilunar [semi-半,lun月亮,-ar形容词后缀,…的 ...

  7. paloalto防火墙版本升级

    1.准备工作:此部分不影响生产环境,可直接操作. 1)备份: 2)下载OS HA情况下,在主机下载完成后,选择 Sync To Peer(同步到对端)同步到备机. 2.安装更新 1)在备机上选择安装 ...

  8. Codeforces Round #553 (Div. 2) B题

    题目网址:http://codeforces.com/contest/1151/problem/B 题目大意:给定一个n*m的矩阵,问是否可以从每一行中选择一个数,使得这n个数异或大于0,如果可以还要 ...

  9. PCB设计基本流程

    [PCB设计基本流程]1.准备原理图和网络表2.电路板规划3.参数设置4.导入网标5.布局6.布线7.规则检查与手工调整8.输出文件 [具体步骤]1.在原理图环境下:Tool——>Footpri ...

  10. vmware 挂起后不能恢复

    报错:未能锁定主内存文件,还原虚拟机状态时出错 虚拟机目录下有一个文件夹,xxx.vmem.lck,里面的lck文件是很久以前的,把它删掉重新恢复就可以了.