此系列体验视频教程
点击观看:哔哩哔哩
什么是面向对象
编程的本质实际上是在根据不同的业务需求处理数据。所以我们就可以把这些不同的业务抽象成各个对象。各个对象都有自己的特征(属性)和行为(方法)。属性中保存了需要被处理的数据,而行为可以根据不同的业务需求来修改数据。
怎么生成对象
这里我们要采用面向对象的思想来生成对象。对象实际是由提前被抽象出来模板(构造函数)生成(实例化)的。
什么是构造函数
构造函数的声明从本质上来讲,和普通函数没有差别,从形式上来讲,构造函数的首字母推荐使用大写字母。从使用上来讲,使用
new
命令,后面跟着函数的调用,这样的函数就被叫做构造函数,是用来生成对象的。
function Person() {
}
console.log(Person());
var p1 = new Person()
console.log(p1);
console.log(typeof(p1));
new命令和this
使用new命令时,它后面的函数依次执行下面的步骤。
- 创建一个空对象,作为将要自动返回的对象。
- 将这个空对象的原型指向构造函数的
prototype
属性 - 将空对象赋值给函数内部的
this
关键字 - 开始执行构造函数内部的代码
// this始终指向一个对象,是当前属性或方法所在的对象。
// this是一个动态的值,是跟使用函数的方式有关的
function Person() {
this.userName = 'xiaoming'
console.log(this);
}
var p1 = new Person() // 实例化构造函数生成对象,函数中的this就是实例化后的对象
console.log(p1);
var p2 = Person()
var p2 = window.Person() // 没有使用关键字new,而是直接调用函数,相当于通过window.方法的方式执行函数。this就会指向函数的调用方,也就是window。
console.log(p2); // undefined
// 带参数的构造函数
function Person(userName, age) {
this.userName = userName
this.age = age
console.log('this:', this);
}
var p1 = new Person('xiaoming', 16)
var p2 = new Person('xiaohua', 19)
console.log(p1, p2);
var p3 = new Person()
console.log(p3);
new相关知识点
// 使用new命令实例化构造函数
function Person() {
this.userName = 'xiaoming'
// return 1 // 如果返回的是非对象数据,则会被忽略,直接返回this对象
return {
userName: 'xiaohua'
} // 如果返回的是对象,则此返回的对象会把this对象覆盖掉
}
var p1 = new Person()
console.log(p1);
// 没有使用this的函数,如果返回的是非对象数据,返回的则是一个空对象
function Person() {
return 'xiaohua'
}
var p1 = new Person()
console.log(p1);
// 总结:new命令总是返回一个对象,要么是实例对象,要么是函数内return语句指定的对象。
function Person(age) {
// console.log(new.target);
if (!new.target) {
return new Person(age)
}
this.userName = 'xiaoming'
this.age = age
}
var p1 = Person()
console.log(p1);
var p2 = new Person()
console.log(p2);
var p3 = Person(16)
console.log(p3);
var p4 = new Person(19)
console.log(p4);
为什么要设计this
var a = 2
function fn() {
console.log(this.a); // js中一切皆对象,运行环境也是对象,所以函数都是在某个对象下运行的,this就是指函数运行时所在的对象(环境),所以this是动态的,在调用之前是不确定的,只有在调用的时候才可以确定this的指向。
}
var obj = {
a: 1,
fn: fn
}
obj.fn()
fn()
var obj2 = {
a: 3,
fn: fn
}
obj2.fn()