美文网首页
【js】--- 原型、原型链与继承

【js】--- 原型、原型链与继承

作者: 愫幕 | 来源:发表于2019-05-03 10:23 被阅读0次

面试中经常考到面向对象的一些知识,在这记录一下,如有不对欢迎指正,愿在前端的道路上共勉!

原型

什么是原型: 简单说就像css的class一样,是公用的,给DOM元素加个class名就可以公用样式,那么原型就相当于css里面的class,都可以用。

在构造函数创建出来的时候,系统会默认的帮构造函数创建并关联一个神秘的对象,这个对象就是原型,构造函数的每一个实例都可以访问原型中的成员(一般我们放方法);

原型链

(原型链这个概念常考哦~) 首先呢,正如上面所说的,当函数被new操作符调用时,会创建出一个对象,并且该对象中会有一个指向其原型对象的秘密链接(一个非标准属性:proto),这样新建的对象(实例)就可以调用相关原型对象中的成员;(咳咳,正题来了哈)但是,原型对象自身也具有对象固有的普遍特征(它也是个对象),因此,也包含了指向其原型对象的链接,因此嘞,就形成了一个链式结构,称之为原型链;

接下来请原谅我的画画技术:


1264576-20171103205650795-1853350983.png
1264576-20171103212309013-1962320834.png

继承

1.那么什么又是继承呢:其实就是一个对象没有的成员,但是另一个对象有,给它拿过用;(在现实世界中这好像叫‘借’吧)

2.继承的过程:(这里引用blue老师的一个比喻) 你媳妇他妈跟你要100万,你没有咋办?找你爹,你爹也没有,咋整?找你爹的爹,但是你爹的爹的爹死了,所以你爷爷说家里没有,也就是返回null;(其实写到这里我内心是崩溃的)

3.继承方式:

//1.混入式继承,说是混入式有点高大上,其实就是遍历赋值
        function Person(){

        }

        let obj = { 
            name:'jack',
            age:'18',
            sayHello:function(){
                console.log('你好,我是'+this.name);
            }};

        for( let k in obj){
            //判断一下obj中的k是不是自己的,当然这不是咱们这篇文章主要研究的
            if(obj.hasOwnProperty(k)){
                //这种不会破坏原型中的constructor的指向
                Person.prototype[k] = obj[k];
            }
        }



        //2.经典继承
        Person.prototype = Object.create(obj);
        
        //上面的代码相当于
        function create(obj){
            function P(){};
            P.prototype = obj;
            return new P();
        }    


        //3.借用构造函数,这种方法继承不过去
        function Person(name,age){
            this.name = name;
            this.age = age;
        }

        Person.prototype.sayHello = function(){
            console.log('你好,我是'+this.name);
        }

        function Human(name,age){
            Person.apply(this,arguments);
        }

        let p = new Human('jack',18);
        console.log(p); 
        p.sayHello();  //p.sayHello is not a function



        //4.直接替换,会改变obj1的constructor的指向
        obj1.prototype = obj2.prototype;

相关文章

  • Javascript(三)之原型继承理解

    进阶路线 3 原型继承 3.1 优秀文章 最详尽的 JS 原型与原型链终极详解 一 最详尽的 JS 原型与原型链终...

  • js_继承及原型链等(四)

    js_继承及原型链等(三) 1. 继承 依赖于原型链来完成的继承 发生在对象与对象之间 原型链,如下: ==原型链...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • web前端面试之js继承与原型链(码动未来)

    web前端面试之js继承与原型链(码动未来) 3.2.1、JavaScript原型,原型链 ? 有什么特点? 每个...

  • javascript中的原型链与继承

    javascript中的原型链与继承javascipt中的原型链和继承机制是这门语言所特有的,但js中的原型机制也...

  • js实现继承的几种方式

    js实现继承有几种方式,这里我们主要探讨 原型链继承 构造继承 组合继承(原型链和构造继承组合到一块,使用原型链实...

  • 浅析JS继承方法

    JS 实现继承的方法有:1.原型链继承2.构造函数继承3.组合继承(原型链继承 + 构造函数继承)4.原型式继承(...

  • js继承

    js继承js 继承-简书 原型链实现集继承 上面的代码实现原型链继承最重要的son.prototype=new f...

  • JS的__proto__和prototype

    最近在回顾JS的原型和原型链的知识,熟悉JS的同学都知道JS的继承是靠原型链实现的,那跟原型链相关的属性__pro...

网友评论

      本文标题:【js】--- 原型、原型链与继承

      本文链接:https://www.haomeiwen.com/subject/weeanqtx.html