前端之JS对象
- 1.对象基础
- 对象的定义
- 子命名空间
- 访问内容
- 用点表示法 和 括号表示法
- 设置对象成员
- 更新数据
- 创建新成员
- "this"的含义
- document 对象
- 2.面向对象的程序(OOP)
- 类
- 继承
- 多态
- 构建函数和对象
- 构建函数的规范写法
- 真正的构造函数
- 创建对象的其他方式
- Object()构造函数
- create()方法
- 小结
- 3.对象原型
- prototype 属性 -- 继承成员被定义的地方
- __proto__查看原型链
- constructor 属性
- 修改原型
- 常用模式
- 继承
- 原型式的继承
- call()函数
- 有参构造函数的继承
- 无参构造函数的继承
- 完美继承 核心*****************************************
对象使我们将一些信息安全地锁在了它们自己的包内,防止它们被损坏。
1.对象基础
对象是一个包含相关数据和方法的集合(也就是 变量, 函数)
对象的内容以花括号包裹, 以逗号隔开.
对象的定义
1.创建一个空对象:
var person = {};
2.创建一个含属性和方法的对象
属性名 : 值
方法名 : function() { 代码块; }
var person = {name: ['Bob', 'Smith'],age: 32,gender: 'male',interests: ['music', 'skiing'],bio: function() {alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');},greeting: function() {alert('Hi! I\'m ' + this.name[0] + '.');}};
子命名空间
每一个对象都可以看成一个命名空间, 子命名空间就是对象内的对象.
访问子对象的属性和方法
var person = {name: {first:'Bob',last: 'Smith'},//子命名空间age: 32,gender: 'male',interests: ['music', 'skiing'],bio: function() {alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');},greeting: function() {alert('Hi! I\'m ' + this.name[0] + '.');}};
访问内容
用点表示法 和 括号表示法
用点表示法来访问对象的属性和方法
1.对象的名字表现为一个命名空间(namespace),它必须写在第一位.
2.访问对象内部的属性或方法时,对象后面跟着一个点(.),紧接着要访问的属性或函数, 可以是数组属性的一个子元素
设置对象成员
更新数据
创建新成员
用点表示法 和 括号表示法 创建新成员.
括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值,还可以动态的去设置成员的名字。
语法:
var myDataName = nameInput.value
var myDataValue = nameValue.valueperson[myDataName] = myDataValue
示范:
var myDataName = 'height'
var myDataValue = '1.75m'person[myDataName] = myDataValue
"this"的含义
关键字"this"指向了当前代码运行时的对象.
document 对象
每个页面在加载完毕后,会创建一个Document的实例, 名为document,它代表了整个页面的结构,内容和一些功能,比如页面的URL。同样的,这意味document有一些可用的方法和属性。
2.面向对象的程序(OOP)
- OOP: 在程序里,我们通过使用对象去构建现实世界的模型,把原本很难(或不可能)被使用的功能,简单化并提供出来,以供访问。
- 对象可以包含相关的数据和代码
类
类( Class )并不是一个对象,它更像是一个定义对象特质的模板。对象是类的实例,类是对象的抽象(模板)。
当一个对象需要从类中创建出来时,类的构造函数就会运行来创建这个实例。
创建对象的过程叫实例化 – 实例对象被类实例化。
继承
继承: 基于某个类创建新的类.
如, 在人的基础上创建老师、学生等更具体的类。
继承的属性和方法是定义在 prototype 属性之上
多态
多态——这个高大上的词正是用来描述多个对象拥有实现共同方法的能力。
多态:同一操作作用于不同的对象,可以有不同的解释,产生不同的执行结果。
构建函数和对象
JavaScript 用构建函数来定义对象和它们的特征。
构造函数的开头大写,这样与普通函数区分.
// 定义类function Person(name) {this.name = name;this.greeting = function() {alert('你好, 我叫' + this.name + '。');}}// 创建对象(实例化)var person1 = new Person('Amy');var person2 = new Person('小明');// 调用函数person1.greeting();person2.greeting();
注意: 属性写在构造函数内, 方法定义在构造器的原型上. 这是最好的写法:
构建函数的规范写法
在 JavaScript 中,用 new 关键字来调用的函数,称为构造函数。
function Person(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;
};Person.prototype.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');
};
构建函数提供了创建您所需对象(实例)的有效方法,将对象的数据和特征函数按需联结至相应对象。
通过一个叫做原形链的参考链链接过去的。
严格的讲, JavaScript 在对象间使用和其它语言的共享机制不同。
1.通过一个普通函数定义一个"人", 创建实例并执行方法:
//用一个普通的函数定义一个'人'function createNewPerson(name) {var obj = {};obj.name = name;obj.greeting = function() {alert('你好, 我叫' + this.name + '。');}return obj;}// 创建实例, 并调用函数var Mike = createNewPerson('Mike');Mike.greeting();
2.类
- 定义Person类: this – 将数据传给调用该函数的实例
function Person(name) {this.name = name;this.greeting = function() {alert('你好, 我叫' + this.name + '。');}}
- 创建对象(实例)
关键字 new 跟着一个含参函数,用于告知浏览器我们想要创建一个对象.
真正的构造函数
//创建最终的构造函数
function Person(first, last, age, gender, interests) {this.name = {'first': first,'last': last};this.age = age;this.gender = gender;this.interests = interests;this.bio = function() {alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');};this.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');};
};// 创建一个对象
var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);// 访问变量和函数
person1['age']
person1.interests[1]
person1.bio()
创建对象的其他方式
Object()构造函数
- 首先, 使用Object()构造函数来创建一个新对象(空的对象)。
- 点或括号表示法向此对象添加属性和方法。
var person1 = new Object();person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {alert('Hi! I\'m ' + this.name + '.');
}// 或 --------------------------------------------------
var person1 = new Object({name : 'Chris',age : 38,greeting : function() {alert('Hi! I\'m ' + this.name + '.');}
});
create()方法
以指定原型对象创建新的对象.
var person2 = Object.create(person1);
小结
/*
时间:2022年3月22日
总结: js三种创建对象的方法
①特殊函数(就叫类函数吧):
定义 – function Person(参数){属性,方法}
使用 – var 变量名 = new Person(参数具体值);
②Object()构造函数创建空对象.
③Object.create()方法
*/
3.对象原型
个人理解:
- js是基于原型的语言. 每个对象都有一个原型对象, 而原型对象也可能有它的原型对象, 于是就形成了原型链.
- 而定义的属性和函数是在原型上的. 不是在函数实例上.
通过原型( prototype )这种机制,JavaScript 中的对象从其他对象继承功能特性;
通过 prototype 属性向已有的构造器添加方法;
原型链: JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——**每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,**并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链 (prototype chain)
注意: 理解对象的原型(可以通过Object.getPrototypeOf(obj)或者已被弃用的__proto__属性获得)与构造函数的prototype属性之间的区别是很重要的。前者是每个实例上都有的属性,后者是构造函数的属性。也就是说,Object.getPrototypeOf(new Foobar())和Foobar.prototype指向着同一个对象。
prototype 属性 – 继承成员被定义的地方
__proto__查看原型链
对象.__proto__
对象.__proto__.__proto__
constructor 属性
使用方法:
实例.constructor
返回值是 实例的原始定义(原型)
修改原型
Person.prototype.farewell = function() {alert(this.name.first + ' has left the building. Bye for now!');
}
function Person(first, last, age, gender, interests) {this.name = {'first': first,'last': last},this.age = age,this.gender = gender,this.interests = interests
};var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);// 修改原型
Person.prototype['farewell'] = function() {alert(this.name.first + ' has left the building. Bye for now!');
}
person1.farewell();
常用模式
在构造器(函数体)中定义属性、
在 prototype 属性上定义方法。
作用: 构造器只包含属性定义,而方法则分装在不同的代码块,代码更具可读性。
// 构造器及其属性定义function Test(a,b,c,d) {// 属性定义
};// 定义第一个方法Test.prototype.x = function () { ... }// 定义第二个方法Test.prototype.y = function () { ... }// 等等……
继承
目的: 创建“子”对象类别(构造器)并从“父”类别中继承功能.
原型式的继承
Person()构造器
function Person(first, last, age, gender, interests) {this.name = {first,last};this.age = age;this.gender = gender;this.interests = interests;
};Person.prototype.greeting = function() {alert('Hi! I\'m ' + this.name.first + '.');
};
在构造器 Person() 的继承上, 创建一个构造器 Teacher(), eg:
call()函数
- 允许您调用一个在这个文件里别处定义的函数
- 第一个参数是 this ,说明是对 this 指定值.
有参构造函数的继承
// 构造器内写属性function Person(first, last, age, gender, interests) {this.name = {first,last};this.aga = age;this.gender = gender;this.interests = interests;}// 原型上定义函数Person.prototype.greeting = () => {alert('Hi! I\'m' + this.name.first + ' ' + this.name.last + '.');}// 在继承Person()构造器属性和含的基础上,创建新的构造器Teather()function Teather(first, last, age, gender, interests, subject) {Person.call(this, first, last, age, gender, interests); //从Person()中继承过来, this表明指向当前对象 this.subject = subject;}
无参构造函数的继承
function Brick() {this.width = 10;this.height = 20;}function BlueGlassBrick() {Brick.call(this);this.opacity = 0.5;this.color = 'blue';}var br1 = new Brick();var br2 = new BlueGlassBrick();
注意:
默认情况下子代对象只包含一个引用构造函数本身的对象属性。父级构造函数prototype属性的方法。
完美继承 核心*****************************************
寄生组合继承:
// 父类 --------------------------------------------------// 构造器内写属性function Person(first, last, age, gender, interests) {this.name = {first,last};this.aga = age;this.gender = gender;this.interests = interests;}// 原型上定义函数Person.prototype.greeting = () => {alert('Hi! I\'m ' + this.name.first + ' ' + this.name.last + '.');}// 子类 --------------------------------------------------function Teacher(first, last, age, gender, interests, subject) {Person.call(this, first, last, age, gender, interests); //从Person()中继承过来, this表明指向当前对象 -- 继承属性this.subject = subject;}// ******通过创建中间对象,将子类原型和父类原型分开, 不是同一个 -- 继承方法Teacher.prototype = Object.create(Person.prototype);// ******修复构造函数指向(构造函数执行自己)Teacher.prototype.constructor = Teacher;// 子类向原型添加共享方法Teacher.prototype.greeting = function() {var prefix; //n.前缀if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {prefix = 'Mr.';} else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {prefix = 'Mrs.';} else {prefix = 'Mx.';}alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');};// 实例化var teacher1 = new Teacher('明', '小', 32, 'male', ['唱', '跳', 'rap'], '数学');