对象是一个包含相关数据和方法的集合(通常由一些变量和函数组成,我们称之为对象里面的属性和方法)
1. 控制台调用
使用单独的Javascript程序需要使用的网页端口的控制台,键入相关命令
Windows点击F12,MAC的打开方法是打开浏览器,同时键入option+command+I
使用console使用控制台
2. 创建对象
2.1 基础创建
javascript">const peron={}
//创建一个对象
javascript">const person={name:['Bob','Louis'],age:[18,20],color:'Red'
};
Javascript对象的创建有点像python字典的创建
如上述代码所示,对象中包含name,age以及color等元素
2.2 使用方法进行对象的创建
引入了类(class)的语法来创建对象,它是构造函数的一种语法糖,使得创建对象和继承变得更加直观。
javascript">class person=
{name;age;constructor(name,age){this.name = name;this.age = age;};great(){console.log('Hello');};
}
创建对象
javascript">const A = new person('name',16);
2.3 构造函数
使用构造函数一次性创建多个对象
javascript">funtion create(name)
{const obj = {};obj.name = name;obj.introduce = function(){console.log(`my name is ${this.name}`);};
};
javascript">let a = create('Bob');
console.log(a.name);
a.introduce();
3. 对象元素的调用
javascript">//调用对象中的元素
person.name[0];
console.log(person.color);
javascript">const person =
{name:'Bob',showname(){console.log(`我的名字是${this.name}`);};};
对象内函数创建也可以使用
javascript">const person =
{showname:function()
{
};
};
对象内元素查看的不同方式:
javascript">//JavaScript提供了多种方式,以下是最常见的几种
person.name[0];
person['name'][0];
也可以直接针对元素进行添加或改变值
4. 对象原型
在JavaScript中,所有的对象都有一个内置属性,称为它的 prototype(原型)。它本身是一个对象,故原型对象也会有它自己的原型,逐渐构成了原型链。原型链终止于拥有 null
作为其原型的对象上。
类似于继承,子类具有父类的特点,可以调用父类中的属性以及方法
4.1 设置原型
使用现有的对象作为新创建对象的原型,继承原型的方法与属性
javascript">const personPrototype = {greet() {console.log("hello!");},
};const carl = Object.create(personPrototype);
carl.greet(); // hello!
5. 继承
继承允许一个类(子类)继承另一个类(父类)的属性和方法。
使用class构造器进行继承
javascript">class a={constructor(name) = {this.name = name;
};introduce = function(){console.log('Hello!');};
};class b = extends a{bark = function()
{};
};
javascript">const dog = new b('Bob');
dog.bark();
dog.introduce();
6. 多态
当一个方法拥有相同的函数名,但是在不同的类中可以具有不同的实现时,我们称这一特性为多态。多态使用子类重写的方法进行实现
javascript">class Animal {speak() {console.log('Animal speaks');}
}class Dog extends Animal {speak() {console.log('Dog barks');}
}class Cat extends Animal {speak() {console.log('Cat meows');}
}const animals = [new Dog(), new Cat()];animals.forEach(animal => {animal.speak(); // 输出: Dog barks 和 Cat meows
});
6.1 重写
在Javascript中,无需声明其他,重写直接针对相同函数名进行代码填充即可
javascript">class Animal {speak() {console.log('Animal speaks');}
}class Dog extends Animal {speak() {console.log('Dog barks');}
}const myDog = new Dog();
myDog.speak(); // 输出: Dog barks
7. 封装
封装是面向对象编程的一个重要特性,它使得对象的内部状态对外部隐藏,提供了清晰的接口来操作对象的数据。
可以通过相应的借口获取对象的信息,并且保证原有对象不会被破坏
7.1 传统封装
通过构造函数实现
javascript">class Person {constructor(name, age) {this._name = name; // 约定为私有属性this._age = age; // 约定为私有属性}getName() {return this._name;}setName(newName) {this._name = newName;}getAge() {return this._age;}setAge(newAge) {this._age = newAge;}
}const person = new Person('John', 30);
console.log(person._name); // 输出: John (虽然约定为私有,但仍然可以访问)
7.2 类(class)语法
使得封装变得更加直观。可以使用 #
语法来定义私有字段,外部无法直接修改访问
javascript">class Person {#name; // 私有属性#age; // 私有属性constructor(name, age) {this.#name = name;this.#age = age;}getName() {return this.#name;}setName(newName) {this.#name = newName;}getAge() {return this.#age;}setAge(newAge) {this.#age = newAge;}
}const person = new Person('John', 30);
console.log(person.getName()); // 输出: John
person.setName('Jane');
console.log(person.getName()); // 输出: Jane