JavaScript继承方式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/C_william/article/details/84775218

这篇博客探讨了JavaScript中三种不同的继承实现方式：通过设置原型、构造器实例化以及使用Object.create方法。同时提到了每种方式的优缺点，如构造器继承时的参数问题以及Object.create的工作原理。此外，还提及了链式调用的概念和字体图标的相关资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

继承

function Person(){};

function Student(){};

继承方式：

Student.prototype = Person.prototype; //一、这样会给Student.prototype添加修改的时候，影响Person

Student.prototype = new Person(); //二、构造器构造Person的实例，Person的实例指向Person.prototype，实现继承。缺点：如果Person(name,age) 带参数，这样继承传参存在问题。

Student.prototype = Object.create(Person.prototype); //三、Object.create()：创建一空对象，原型指向他的参数。实现继承。

Object.create工作原理 →

Object.create = function ( proto ){
    function F (){};
    F.prototype = proto;
    reuturn new F();//new F() 创建一个对象，对象的原型指向构造器的prototype
}

链式调用

function newClass(){};
newClass.prototype.addClass = function (str){
    console.log('Class:'+str);
    return this; //这里的this指newClass()这个构造器
}
var test = new newClass();
test.addClass('classA').addClass('classB'); // Class:classA; Class:classB


function cc (str){
    console.log('name:'+str);
    return this;//this指向window
}
cc('vv1').cc('vv2');// name:vv1; name:vv2
可以理解为执行完cc('vv1')返回window→ window.cc('vv2');

字体图标

https://icomoon.io/

空对象取下标报错，关联vue（v-if）什么时候使用

var a = {}    //创建空对象
a.b    //undefined
a.b[0]    //报错（在undefined下取值）

JS补习笔记1