构造函数0208

什么是构造函数

构造函数就是构造器函数(constructor function)。⼀个⽤于构建多个对象的特殊函数。

// 在项⽬中,我们需要创建⼀个学⽣对象student1
        let student1 = {
            name : '老刘',
            age : 17
        }
// 还需要创建学⽣对象student2
        let student2 = {
            name : '刘老',
            age : 18
        }
// 我们还需要创建更多个与student相似的对象,逐个⼿动创建缺点是:过程复杂且不利于维护。使⽤构造器函数可以解决这个问题:
// 创建⼀个名叫Student的构造器函数
        function Student(name,age){
            this.name = name
            this.agw = age
        }

// 从技术上讲,构造函数是具有以下约定的常规函数:
    // 1构造函数名建议⾸字⺟⼤写,以区分普通函数。2构造器函数应该使⽤new操作符调⽤。
// !!请注意,ES6 引⼊了 class 关键字,允许您定义⾃定义类型。类只是构造函数的语法,具有⼀些增强功能。
// 通过new操作符创建Student的对象实例'老刘'
        const student1 = new Student('老刘',17)
// 创建对象实例'刘老'
        const student2 = new Student('刘老',18)

构造函数的工作原理

基本上,使⽤new调⽤构造函数时执⾏了以下操作:

  • 创建⼀个空对象并将其分配给变量this 。
  • 将参数“老刘”和“17”分配给对象的 name和 age属性。
  • 返回 this

模拟new操作符的⼯作过程:

function Student(name, age) {
// this = {};
// 给this添加属性
this.name = name;
this.age = age;
// return this;
}

//所以下⾯的语句
let student1 = new Student('老刘',17)

//等同于
let student1 = {
            name : '老刘',
            age : 17
        }

构造函数的return

  • 通常,构造函数隐式返回this,这个this指向新构建的对象。
  • 如果手动返回return
    return this;则同隐式返回this
    return后跟⾮对象值,则返回this(⾮对象值被忽略);
    return后跟对象值,则对象值覆盖this;

向构造函数添加方法

  • 对象可能具有操作其数据的⽅法。要向构造器函数创建的实例对象添加方法,可以使用 this 关键字
    示例:
function Student(name, age) {
this.name = name;
this.age = age;
this.sayHi = function () {
return this.name + ":'Hi~'";
 };
}

然后创建实例对象,并调用方法

构造函数的问题

  • 通过构造器函数向对象添加⽅法的缺点是:当创建多个对象实例时, this.sayHi 被添加到每⼀个实例对象中,也就是说内存使⽤效率降低:每个实例的 sayHi 方法会在内存堆中创建存储空间。
  • 可以使用 prototype 属性解决这个问题,把方法添加到构造函数的prototype对象身上,让所有的对象实例共享方法。

把⽅法添加到构造函数的原型对象上

示例

function User(name, age) {
this.name = name;
this.age = age
// this.sing = function () {console.log('lalala')} //错误⽅法:不要把函数添加到构造函数内
部,原因:消耗内存
}
User.prototype.sing = function () {console.log('lalala')}//正确⽅法:要把⽅法添加到构造函数的
原型对象上。
console.log(User);
const user1 = new User('老刘', 17)
const user2 = new User('老刘', 17)
console.log(user1.sing === user2.sing);//true 说明user1.sing和user2.sing指向同⼀个函数
// console.log(User.prototype);
// console.log(user1.toString());//[object Object]
console.log(user1.__proto__);

原型示意图

3262e8231b0cfd5957e4dfe42d46e54.png

阐述

  • 1.任何构造函数内部都有prototype属性:该属性指向⼀个被称为原型的对象
  • 2.任何原型对象内部都有⼀个constructor 属性: 该属性指向构造函数 User()
  • 3.通过关键词new调用构造函数User创建了实例对象 user1
  • 4.在创建实例对象的过程中,构造函数自动为实例对象分配了⼀个父级对象,这个父级对象就是实例对象的原型对象。
  • 5.任何实例对象上都有⼀个 __proto __ 属性,该属性指向其 原型 对象。

构造函数的prototype属性是什么

  • 当使用new关键词调⽤构造函数创建对象实例时,构造函数会自动为实例对象分配⼀个父级对象,这个父级对象就是实例对象的原型,
  • 并且实例对象会拥有这个它的原型的所有属性和方法。
  • 每⼀个构造函数都有⼀个prototype属性,这个属性就是实例对象的原型对象。
    • 所有的构造函数都有⼀个 prototype 属性
    • prototype 属性指向⼀个对象,这个叫”原型对象“。
    • ”原型对象“: 它也是⼀个对象呀!!!意味着”原型对象“也有⾃身的属性和方法。
    • ”原型对象“有⼀个 constructor 属性

原型对象的constructor属性是什么

  • 所有的”原型对象“身上有⼀个 constructor 属性
  • constructor 属性指向⼀个构造函数

实例对象的proto属性是什么

  • 所有的实例对象身上都有⼀个⾮标准的 proto 属性
  • proto 属性指向它的原型对象

null

  • null表示到达了原型链的顶端。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容