首页 /  技术专区  /  JavaScript 宽屏模式 >

JavaScript 构造函数、实例成员、静态成员

1. 创建对象三种方式

1. 利用对象字面量创建对象

const o = {
    name: '佩奇'
}

2. 利用 new Object 创建对象

const o = new Object({name: '佩奇'})
console.log(o)

3. 利用构造函数创建对象


2. 构造函数

构造函数 :是一种特殊的函数,主要用来初始化对象

使用场景:常规的 {...} 语法允许创建一个对象。比如我们创建了佩奇的对象,继续创建乔治的对象还需要重新写一遍,此时可以通过构造函数快速创建多个类似的对象

// 创建佩奇对象
const Peppa = {
    name: '佩奇',
    age: 6,
    gender: '女'
}
// 创建乔治对象
const George = {
    name: '乔治',
    age: 3,
    gender: '男'
}
// 创建猪妈妈的对象
const Mum = {
    name: '猪妈妈',
    age: 30,
    gender: '女'
}
// 创建猪爸爸的对象
const Dad = {
    name: '猪爸爸',
    age: 32,
    gender: '男'
}

构造函数在技术上是常规函数。

不过有两个约定:

1. 它们的命名以大写字母开头。

2. 它们只能由 "new" 操作符来执行。

function Pig(name, age, gender) {
    this.name = name
    this.age = age
    this.gener = gender
}
// 创建佩奇对象
const Peppa = new Pig('佩奇', 6, '女')
// 创建乔治对象
const George = new Pig('乔治', 3, '男')
// 创建猪妈妈对象
const Mum = new Pig('猪妈妈', 30, '女')
// 创建猪爸爸对象
const Dad = new Pig('猪爸爸', 32, '女')

构造函数语法:大写字母开头的函数

创建构造函数:

// 1、创建构造函数
function Pig(name) {
    this.name = name
}
// 2、new 关键字调用函数
// new Pig('佩奇')
// 接受创建的对象
const peppa = new Pig('佩奇')
console.log(peppa)

说明:

1. 使用 new 关键字调用函数的行为被称为实例化

2. 实例化构造函数时没有参数时可以省略 ()

3. 构造函数内部无需写return,返回值即为新创建的对象

4. 构造函数内部的 return 返回的值无效,所以不要写return

5. new Object() new Date() 也是实例化构造函数


实例化执行过程

1. 创建新对象

2. 构造函数this指向新对象

3. 执行构造函数代码,修改this,添加新的属性

4. 返回新对象


3. 实例成员&静态成员

实例成员:

通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。

// 构造函数
function Person() {
    // 构造函数内部的 this 就是实例对象
    // 实例对象中动态添加属性
    this.name = '小明'
    //实例对象动态添加方法
    this.sayHi = function () {
        console.log('大家好~')
    }
}
// 实例化,p1 是实例对象
// p1 实际就是 构造函数内部的 this
const p1 = new Person( )
console.log(p1)
console.log(p1.name) // 访问实例属性
p1.sayHi() // 调用实例方法

说明:

1. 实例对象的属性和方法即为实例成员

2. 为构造函数传入参数,动态创建结构相同但值不同的对象

3. 构造函数创建的实例对象彼此独立互不影响。


静态成员:

构造函数的属性和方法被称为静态成员

//构造函数
function Person(name, age) {
    // 省略实例成员
}
// 静态属性
Person.eyes = 2
Person.arms = 2
// 静态方法
Person.walk = function () {
    console.log('^^人都会走路...')
    // this 指向 Person
    console.log(this.eyes)
}
Person.walk()

说明:

1. 构造函数的属性和方法被称为静态成员

2. 一般公共特征的属性或方法静态成员设置为静态成员

3. 静态成员方法中的 this 指向构造函数本身




头像
0/200
图片验证码