javascript 例子构造函数 js构造函数的作用

转载

笑傲江湖求败 2023-09-28 20:36:05

文章标签 javascript 例子构造函数 javascript 构造函数内存空间 ico 文章分类 JavaScript 前端开发

一、什么是构造函数

构造函数其实是一种特殊的函数，主要用来初始化对象，也就是为对象成员变量赋初始值，它总与new关键字一起使用。
我们可以把对象里面一些公有的属性和方法抽象出来封装到这个构造函数里面。
这样我们就可以通过一个构造函数创建多个对象，这些对象拥有相同的构造，都可以使用这个构造函数的方法和属性。

二、构造函数的目的

构造函数的目的就是为了创建一个自定义类，并且创建这个类的实例。构造函数模式中拥有了类和实例的概念，并且实例和实例之间是相互独立的，即实例识别

三、构造函数的使用

构造函数的创建

构造函数首字母一般会大写，为了和普通函数区分
构造函数的属性和方法前必须加this关键字，指代要生成的对象
使用new关键字调用，也就是通过构造函数来创建对象实例
通过创建的对象实例调用构造函数中的属性或方法
例：

function Student() {
            //构造函数中的属性
            this.name = 'summer'
            //构造函数中的方法
            this.setName = function () {
                console.log('winter')
            }
        }
        //创建对象实例s1
        var s1 = new Student()
        //调用构造函数中的属性
        console.log(s1.name)
        //调用构造函数中的方法
        s1.setName()

构造函数的调用

调用构造函数时，如果不传递参数，（）可以省略，如果传递就必须写上，建议都写上
例：

//无参时
  function Student() {
            
        }
        var s1 = new Student
//有参时
function Student(name) {
            this.name = name
        }
        var s2 = new Student('笑笑')
        console.log(s2.name)

构造函数中的this

先看代码，通过例子讲解

function Student() {
            //构造函数中的属性
            this.name = 'summer'
            //构造函数中的方法
            this.setName = function () {
                console.log('winter')
            }
        }
        //创建对象实例s1
        var s1 = new Student()
        //调用构造函数中的属性
        console.log(s1.name)
        //调用构造函数中的方法
        s1.setName()

讲解：

构造函数中的this是指向实例对象的,也就是当以 new 关键字调用时，会创建一个新的内存空间，标记为 Student的实例。
函数体内部的this 指向该内存，每当创建一个实例的时候，就会创建一个新的内存空间（#s1），创建#s1 的时候，函数体内部的 this 指向#s1。也就是说给this添加属性，就是相当于给实例添加属性。
由于函数体内部的this指向新创建的内存空间，默认返回 this，就相当于默认返回了该内存空间，

var s1 = new Student() //this==>s1

构造函数的返回值

没有手动添加返回值，默认返回this

function Student(name) {
            this.name = name
        }
        var s2 = new Student('笑笑')
        console.log(s2.name) //输出笑笑

手动添加一个基本数据类型返回值，最终还是返回this

function Student(name) {
            this.name = name
            return 50
        }
        var s2 = new Student('笑笑')
        console.log(s2.name) //输出笑笑

手动添加一个复杂数据类型返回值，最终返回该对象

例1：

function Student(name) {
            this.name = name
            return ['a','b']
        }
        var s2 = new Student('笑笑')
        console.log(s2.name) //输出undefined
        console.log(s2.length) //输出2
        console.log(s2[0]) //输出a

例2：

function Student(name) {
            this.name = name
            return {
                name:'summer'
            }
        }
        var s2 = new Student('笑笑')
        console.log(s2.name) //输出summer

使用new关键字调用和不使用new关键字直接调用的区别

使用new关键字调用

代码例子：

function Student(name) {
            this.name = name
        }
        var s2 = new Student('笑笑')
        console.log(s2.name) //输出笑笑

用new调用构造函数，函数内部会发生如下变化：

创建一个this变量，该变量指向一个空对象。并且该对象继承函数的原型
属性和方法被加入到this引用的对象中；
隐式返回this对象（如果没有显性返回其他对象；
如果指定了返回对象，那么，this对象可能被丢失。
例：

function Person(name) {
            this.name = name;
            this.say = function () {
                return "I am " + this.name;
            }
            var that = {};
            that.name = "It is that!";
            return that;
        }

        var person1 = new Person('nicole');
        console.log( person1.name)// 输出"It is that!"

直接调用

如果直接调用函数，那么，this对象指向window，并且，不会默认返回任何对象（除非显性声明返回值）。

function Person(name) {
            this.name = name;
            this.say = function () {
                return "I am " + this.name;
            }
        }
        var person1 = Person('nicole');
        console.log( person1)  //输出undefined
        console.log(window.name)  //输出nicole