JS补习笔记1

最新推荐文章于 2024-06-30 17:18:02 发布

原创最新推荐文章于 2024-06-30 17:18:02 发布 · 273 阅读

CC 4.0 BY-SA版权

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

继承

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下取值）