JavaScript面试题总结系列(五)

5.JavaScript继承

继承是什么

A对象通过继承B对象,就能直接拥有B对象的所有属性和方法。

方式一、原型链继承

核心:子类型的原型为父类型的一个实例对象

    // 创建一个父类(注意其本质仍然是一个构造函数)
    function Parent() {
        this.name='kevin';
    }

    // 创建父类上的一个共享方法
    Parent.prototype.getName = function(){
        console.log(this.name);
    }

    // 创建子类
    function Child() {

    }

    // 核心代码:将父类的实例作为子类的原型
    Child.prototype = new Parent();

    var child1 = new Child();

    console.log( child1.getName() ); // kevin

方式二、组合继承优化

核心:借助已有的对象来创建对象,var B = Object.create(A); ,以A对象为原型,创建B对象。B继承了A对象的所有属性和方法。

        // 创建父类
        function Person(name,age) {
            this.name = name;
            this.age = age;
        }

        // 创建父类共享的方法
        Person.prototype.setAge = function(){
            console.log(111);
        }

        // 创建子类
        function Student(name, age, price) {
            Person.call(this, name, age);
            this.price = price;
            this.setScore = function() {

            }
        }

        Student.prototype = Object.create(Person.prototype); // 核心代码
        Student.prototype.constructor = Student; // 核心代码

        var s1 = new Student('tom', 20, 15000);

        console.log(s1 instanceof Student); // true
        console.log(s1 instanceof Person); // true

        console.log(s1.constructor); // Student
        console.log(s1); // Student?{name: "tom", age: 20, price: 15000, setScore: ?}

小结:

总结该专题知识点的时候,找到了很多好的资源,讲的基本都是六-八种的继承方式。这里没有一一列出的原因是希望如果赶时间参加面试的你,可以先从这两种根本的方法去下手,有一个初步的了解,不至于问到的时候一点都不知道。

方式一是一种最基础,最接近于常识的理解,有助于快速进入状态。方式二则是比较了几种实现的继承的方式后,一种相对来说比较完美的做法,可以作为一个“终极”继承版本来用。有兴趣的读者,可以看看文末的链接,获取更多的继承方式的讲解。


参考链接:
https://github.com/mqyqingfeng/Blog
https://segmentfault.com/a/1190000016708006
https://segmentfault.com/a/1190000015727237
https://juejin.im/post/5bcb2e295188255c55472db0#heading-0
https://www.cnblogs.com/humin/p/4556820.html
https://github.com/mqyqingfeng/Blog/issues/16
http://www.ayqy.net/blog/%E9%87%8D%E6%96%B0%E7%90%86%E8%A7%A3js%E7%9A%846%E7%A7%8D%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/
https://zhuanlan.zhihu.com/p/37735247

原文地址:https://www.cnblogs.com/zxxsteven/p/11737351.html

时间: 2024-10-04 15:42:02

JavaScript面试题总结系列(五)的相关文章

JavaScript面试题总结系列(九)

9. JavaScript - ES6+介绍 一.var let const 区别: 使用 var 声明的变量,可以变量提升: 使用let. const声明的变量,没有变量提升: 二. 临时死区(Temporal Dead Zone) 与var不同,let和const声明的变量不会被提升到作用域顶部.因此,如果在声明之前访问这些变量,就会引发错误. 例如: if (condition) { console.log(typeof value); // 引用错误 let value = "blue&

JavaScript面试题总结系列(三)

3. JavaScript数组 3.1 数组常用方法 map: 遍历数组,返回回调函数返回值组成的新数组,不改变原数组 forEach:无法break,可以用try/catch中throw new Error来停止 filter:过滤 some:有一项返回true,则整体为true every:有一项返回false,则整体为false join:通过指定连接符生成字符串 push / pop:末尾推入和弹出,改变原数组, 返回推入/弹出项 unshift / shift:头部推入和弹出,改变原数

JavaScript面试题总结系列(四)

4.JavaScript原型和原型链 4.1 概念介绍 原型和原型对象 原型也是对象,叫原型对象.所以,原型和原型对象是一回事,只不过有人说的简洁,有人说的是全称. ? 原型链 原型(原型对象).构造函数和(对象)实例构成了原型链.原型链的核心就是依赖对象的__proto__指向,当检索依赖对象本身不存在的属性时,就会一层一层地向上去查找创建对象的构造函数,一直找到Object,就没有__proto__的指向了. ? 构造函数 首字母大写的函数.例如: ```javascript functio

JavaScript面试题总结系列(六)

6.JavaScript作用域 作用域 概念 简单地说,作用域就是在上下文中,变量与函数的可访问范围.它可以分为块级作用域和函数作用域. 作用 作用域控制着变量与函数的可见性和生命周期. 作用域链 概念 作用域链可以理解为一组对象列表,包含父级和自身的变量对象,因此我们便能通过作用域链访问到父级里声明的变量或者函数. 作用 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window对象即被终止,作用域链向下访问变量是不被允许的 组成 由两部分组

JavaScript面试题总结系列(七)

7.JavaScript闭包 概念 闭包是函数,是能够读取其他函数内部变量的函数.例如:函数 A 返回了一个函数 B,并且函数 B 中使用了函数 A 的变量,函数 B 就被称为闭包. 特性 函数内部再嵌套函数 内部函数可以引用外层函数的参数和变量 内部函数的参数和变量不会被垃圾回收机制回收 作用 读取函数内部的变量 让这些变量始终保持在内存中,实现缓存 避免全局变量的污染 使用闭包主要是为了设计私有的方法和变量,即封装对象的私有属性和私有方法,实现封装 利用闭包可以突破作用链域 缺点 消耗内存.

Javascript面试题解析

Javascript的一些面试题让很多同学感到头疼,下面就根据兄弟连教育(www.lampbrother.net)毕业学员面试遇到的面试题,给大家做一个简单的分享,希望对初入职场的你们有一些帮助:Javascript面试题解析. 第一题 /* 解析: + 优先级大于 ? 此题等价于: 'Value is true' ? 'Something' : 'Nothing' 所以结果是:'Something' */ var val = 'smtg'; console.log('Value is ' +

理解javascript原型和作用域系列(9)——简述【执行上下文】下

继续上一篇文章(http://www.cnblogs.com/wangfupeng1988/p/3986420.html)的内容. 上一篇我们讲到在全局环境下的代码段中,执行上下文环境中有如何数据: 变量.函数表达式——变量声明,默认赋值为undefined: this——赋值: 函数声明——赋值: 如果在函数中,除了以上数据之外,还会有其他数据.先看以下代码: 以上代码展示了在函数体的语句执行之前,arguments变量和函数的参数都已经被赋值.从这里可以看出,函数每被调用一次,都会产生一个新

理解javascript原型和作用域系列(8)——简述【执行上下文】

什么是“执行上下文”(也叫做“执行上下文环境”)?暂且不下定义,先看一段代码: 第一句报错,a未定义,很正常.第二句.第三句输出都是undefined,说明浏览器在执行console.log(a)时,已经知道了a是undefined,但却不知道a是10(第三句中). 在一段js代码拿过来真正一句一句运行之前,浏览器已经做了一些“准备工作”,其中就包括对变量的声明,而不是赋值.变量赋值是在赋值语句执行的时候进行的.可用下图模拟: 这是第一种情况. 下面还有.先来个简单的. 有js开发经验的朋友应该

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q