〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数

  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:哈哥撩编程,十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker全栈领域优质创作者

  • 白宝书系列
    • 启示录 - 攻城狮的自我修养
    • Python全栈白宝书
    • ChatGPT实践指南白宝书
    • 产品思维训练白宝书
    • 全域运营实战白宝书
    • 大前端全栈架构白宝书


文章目录

  • ⭐ 内置构造函数
  • ⭐ Obejct和Function

⭐ 内置构造函数

JavaScript有很多内置构造函数,比如Array就是数组类型的构造函数,Function就是函数类型的构造函数,Object就是对象类型的构造函数

内置构造函数非常有用,所有该类型的方法都是定义在它的内置构造函数的prototype上的(比如数组的pop()方法、slice()方法都是定义在Array的prototype上的,由于数组都可以看作是Array的示例,所以数组就可以通过原型链的方式去调用这些方法。),我们也可以给这个对象添加新的方法,从而拓展某类型的功能

〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数_第1张图片

下面来敲一些demo验证一下上面的结论:

// 数组的内置构造函数,任何的数组都可以看作是Array的实例
console.log([1, 2, 3] instanceof Array);    // true
console.log([] instanceof Array);           // true

var arr = new Array(5);    // 得到一个长度为5的空数组
console.log(arr);
console.log(arr.length);

// 函数的内置构造函数
function fun() {

}
function add(a, b) {
    return a + b;
}
console.log(fun instanceof Function);   // true
console.log(add instanceof Function);   // true

var jianfa = new Function('a', 'b', 'return a - b');
console.log(jianfa(8, 3));

// 对象的内置构造函数
console.log({ a: 1 } instanceof Object);   // true
console.log({} instanceof Object);       // true

var o = new Object();   // 得到一个空对象
o.a = 1;
o.b = 1;
console.log(o);

〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数_第2张图片

上面还提到,我们可以给对象添加新的方法,从而拓展某类型的功能,那么如何扩展一个对象的方法呢?下面我们就来写一个扩展数组对象的方法的demo:

// 拓展数组的方法,实现数组的“求和”
Array.prototype.qiuhe = function () {
    // 备份上下文
    var arr = this;
    // 累加器
    var sum = 0;
    for (i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}

var arr = [1, 2, 3, 4];
var result = arr.qiuhe();   // 数组可以调用求和方法了
console.log(result);

〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数_第3张图片

注意:面试的时候会经常考到给数组添加一些新的功能,一定要记得可以利用原型链的原理往Array.prototype上添加新的方法至于算法方面,就要多刷算法题提高自己的算法思想


⭐ Obejct和Function

  • Obeject.prototype是万物原型链的终点。

  • 任何函数都可以看作是Function new 出来的

Object本身是函数,所以Object又可以看作是Function new出来的。那么ObjectFuntion的关系是怎样的呢?他们两者的原型链可以用下图所示:

〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数_第4张图片

下面用代码来验证一下上图中的关系:

console.log(Object.__proto__ === Function.prototype);    //true, 任何函数都可以看作是`Function` `new` 出来的
console.log(Function.__proto__ === Function.prototype);  //true, 任何函数都可以看作是`Function` `new` 出来的

console.log(Function instanceof Object);        // true, `Obeject.prototype`是万物原型链的终点
console.log(Object instanceof Object);          // true, `Obeject.prototype`是万物原型链的终点
console.log(Function instanceof Function);      // true, 任何函数都可以看作是`Function` `new` 出来的
console.log(Object instanceof Function);        // true, 任何函数都可以看作是`Function` `new` 出来的

〖大前端 - 基础入门三大核心之JS篇(56)〗- 内置构造函数_第5张图片

你可能感兴趣的:(大前端全栈架构白宝书,#,①,-,基础入门三大核心篇,前端,javascript,开发语言,内置构造函数,Obejct和Function,Obejct,Function)