构造函数与原型对象

224 阅读2分钟

1.js构造函数

在JavaScript中,用new关键字来调用的函数,称为构造函数,构造函数首字母一般大写,构造函数就是一个普通的函数,但是有自己的特征和用法。 特点

  • 一个构造函数可以使用 new 关键字来创造出若干的实例。
  • 每一个实例都可以使用这个构造函数的属性和方法。

(1)new关键字工作原理

  • (1)创建空对象 { }
  • (2)this指向这个对象 this = { }
  • (3)执行赋值代码
  • (4)返回这个对象 return this
// function Person(name,age){
        //     //(1)创建空对象  {}
        //     //(2)this指向这个对象 this = {}
        //     //(3)执行赋值代码
        //     //(4)返回这个对象  return this
        //     this.name = name;
        //     this.age = age;
        //     this.sayHi = function(){
        //         console.log('来自m78星云的靓仔');
        //     }
        // };

        // let p1 =  new Person('来自m78星云的靓仔',28);
        // console.log(p1);
        // p1.sayHi();

        // let p2 = new Person('来自m78星云的靓仔',18);
        // p2.sayHi();
        // //每一个对象的方法都不是同一个
        // console.log(p1.sayHi == p2.sayHi);//false

2.构造函数的弊端

  • 1: 如果构造函数中有很多的方法那么就会开辟很多的空间,浪费内存资源
  • 2: 如果在全局情况下声明函数,虽然解决了内存资源浪费的问题,但是又会出现全局变量污染的问题
  • 3: 可以重新声明一个对象专门存放这些方法,但是新的问题时,如果有很多个构造函数,就要声明很多个这样的对象

总结:(1)内存资源浪费 (2)全局变量污染

3.解决方案

(1) 对象(使用对象解决)

// let obj = {
        //     fn:function(){
        //         console.log('来自m78星云的靓仔');
        //     },
        //     eat:function(){
        //         console.log('来自m78星云的靓仔'); 
        //     }
        // }
        

        // function Person(name,age){
        //     //(1)创建空对象  {}
        //     //(2)this指向这个对象 this = {}
        //     //(3)执行赋值代码
        //     //(4)返回这个对象  return this
        //     this.name = name;
        //     this.age = age;
        //     this.sayHi = obj.fn;
        //     this.eat = obj.eat;
        // };

        // let p1 =  new Person('来自m78星云的靓仔',28);
        // console.log(p1);
        // p1.sayHi();

        // let p2 = new Person('来自m78星云的靓仔',18);
        // p2.sayHi();
     
        // console.log(p1.sayHi == p2.sayHi);//true

特点:(1)解决内存资源浪费 (2)全局变量污染(对象自身还是全局的,造成新的全局变量污染)

(2) 原型对象

原型对象?

  • 每一个构造函数在声明的时候,系统会自动的创建一个与之对应的对象,称之为原型对象
  function Person(name,age){
            this.name = name;
            this.age = age;
        };

如何获取原型对象

  • 每一个函数都有一个 prototype 属性,指向这个原型对象
console.log(Person.prototype);

原型对象是一个对象 : 用于存储数据

  Person.prototype.sayHi = function(){
          console.log('来自m78星云的靓仔');
          
      };

谁可以访问 原型中的成员(属性+方法)

  • a. 构造函数自身 : 构造函数名.prototype
  • b. 这个构造函数所创建(实例化)的每一个对象
   // 实例化对象
     let p1 = new Person('来自m78星云的靓仔',18);
     p1.sayHi();

     //实例化对象
     let p2 = new Person('来自m78星云的靓仔',20);
     p2.sayHi();

     console.log(p1.sayHi === p2.sayHi);//true

后记

image.png