• js---构造函数


    一个构造函数,可以生成多个对象,每个对象都有相同的结构。对于JS中的任何一个普通函数,当用new关键字来调用时,它就是构造函数。

    ECMAScript提供了多个内置构造函数,如 Object、Array、String、Boolean、Number、Date…等等。
    var obj = new Object();
    var arr = new Array();
    ECMAScript也允许自定义构造函数

    构造函数一般首字母会大写,为了和普通函数区分
    一个构造函数可以通过new创建多个实例对象
    创建构造函数时,里面的属性和方法前必须加this,this就表示当前运行时的对象

    例:

    1. function Person(name, height) {
    2. this.name = name;
    3. this.height = height;
    4. this.bark = function(fs){
    5. return fs
    6. }
    7. }
    8. var boy = new Person('Keith', 180);
    9. console.log(boy); //Person {name: 'Keith', height: 180, bark: ƒ}
    10. console.log(boy.constructor); //f Person(){} //整个构造函数原型
    11. console.log(boy.bark(8)); //8
    12. console.log(boy.name); //'Keith'
    13. console.log(boy.height); //180
    1. function Cat1(name){
    2. this.name = name;
    3. console.log(this) //先打印 new的时候打印 Cat1 {name: 'kk'}
    4. }
    5. var cat3 = new Cat1("kk");
    6. console.log(cat3); //后打印 Cat1 {name: 'kk'} 指向原型链,再赋值


      构造函数不需要return 就可以返回结果 :

    1. function Dog(){
    2. this.name = "贝贝";
    3. this.bark = function(){
    4. console.log("汪汪汪");
    5. }
    6. // return 0;
    7. // return [];
    8. }
    9. var d1 = new Dog();
    10. console.log(d1);//Dog {name: '贝贝', bark: ƒ}
    11. //构造函数不需要return 就可以返回结果

    构造函数原理:

    1 自从用new调用函数后,JS引擎就会在内存中创建一个空对象{}
    const newObj = {};
    2 新对象的__proto__属性指向构造函数的原型对象
    (通俗理解就是新对象隐式原型__proto__链接到构造函数显式原型prototype上。)

          newObj.__proto__ = functionName.prototype

    3 构造函数内部的this会指向这个新对象(即将构造函数的作用域指向新对象)
    this = newObj
    4 从上到下执行函数体(只有这步是我们能直观看到代码的)
    5 返回创造出来的对象(如果构造函数没有返回对象,则默认返回this。在函数体内部的this指向新创建的内存空间,默认返回 this 就相当于默认返回了该内存空间)

    1. function Person(name, age) {
    2. this.name = name;
    3. this.age = age;
    4. this.eating = function() {
    5. console.log(this.name + ' is eating');
    6. }
    7. }
    8. const p1 = new Person('zs', 12);
    9. //----------------------------------------------------------------------------
    10. /*实际JS引擎帮助我们实现的操作*/
    11. const newObj = {};
    12. newObj.__proto__ = Person.prototype;
    13. this = newObj;
    14. this.name = name;
    15. this.age = age;
    16. this.eating = function() {
    17. console.log(this.name + ' is eating');
    18. }
    19. return newObj;

    与普通函数的区别:

    1 构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写

    2 调用方式不一样,作用也不一样(构造函数用来新建实例对象)

       普通函数的调用方式:直接调用 person();

       构造函数的调用方式:需要使用new关键字来调用 new Person();

    3 构造函数的内部用this 来构造属性和方法  

    4 普通函数:因为没有返回值,所以为undefined,构造函数:马上创建一个新对象,并将该新对象作为返回值返回

    参考:js构造函数详解_打码中...的博客-CSDN博客_js中构造函数

    JS 中构造函数和普通函数的区别_灵灵7的博客-CSDN博客_js构造函数和普通函数的区别 

  • 相关阅读:
    el-input 设置type为number时,隐藏后面上下箭头以及输入文字光标上移的情况
    【Java SE】方法的使用
    C语言300行代码实现扫雷(可展开+可标记+可更改困难级别+内附图形界面版本)
    深入理解三维旋转矩阵——R的行和列分别有什么含义
    质点动力学
    Java开发规范
    C++输入输出总结
    #分库分表-分片算法
    工业产品外观设计的4个关键因素,你知道吗?
    用Excel制作甘特图跟踪项目进度(附绘制教程)
  • 原文地址:https://blog.csdn.net/Gong_01/article/details/126915265