Js实现继承的方法

原型的作用: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();            //当然可以正常调用子代的属性和方法


原文地址:https://www.cnblogs.com/yucheng6/p/9746266.html

时间: 2024-08-26 03:57:59

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

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

一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 代码如下: <SPAN style="<SPAN style="FONT-SIZE: 18px"><html> <body> <script type="text/javascript"> function Person(name,age){ this.name=name; this.age=age; } Person

分享一个js原型继承的方法

function Person(){ this.color = [23,2,3,32] } undefined var p = Object.create(new Person()) undefined p.color.push(1)

关于 JS 面向对象继承属性和方法的小例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>关于 JS 面向对象继承属性和方法的小例子</h1> </body> </html> <script> //人的构造函

JS中通过call方法实现继承

讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS通过call方法实现继承</title> </head> <body> <script type="text/javascript"> /* js中的继承有多种实现方式,今天我们讨论下通过call方法实现的继承. 此

Js的继承方法

Js继承 要想继承,就必选有一个要被继承的产业 function who(name){ this.name = name this.say = function(){ console.log(this.name) } } who.prototype.age = 10 第一种方法:原型链继承 function xiaoming(){ this.name = 'xiaoming' } xiaoming.prototype = new who() let xiaoming1 = new xiaomin

js中继承的几种用法总结(apply,call,prototype)

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"><html>   <body>  <script type="text/javascript"> 

JS原型继承和类式继承

类式继承(构造函数) JS中其实是没有类的概念的,所谓的类也是模拟出来的.特别是当我们是用new 关键字的时候,就使得"类"的概念就越像其他语言中的类了.类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性.call和apply方法为类式继承提供了支持.通过改变this的作用环境,使得子类本身具有父类的各种属性. JavaScript var father = function() { this.age = 52; this.say = function() { al

Js的 &quot;继承&quot;

Js 和 Java , C等语言不是很一样 . 其他语言有 类和实例 但是Js就比较特殊 , 所以 类和实例 只能说是大多数面向对象编程的语言的基本概念 . Js比较特殊 , 它不去分类和实例的概念 .  而是通过原型(prototype)来实现面向对象编程  . 下面介绍Js中第一种用于继承的方法 var robot = { name: 'Robot', height: 1.6, run: function () { console.log(this.name + ' is running..

JS对象继承篇

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