每天3小时学前端之JS-第20天-面向对象1

158 阅读3分钟

此系列体验视频教程

点击观看:哔哩哔哩

什么是面向对象

编程的本质实际上是在根据不同的业务需求处理数据。所以我们就可以把这些不同的业务抽象成各个对象。各个对象都有自己的特征(属性)行为(方法)属性中保存了需要被处理的数据,而行为可以根据不同的业务需求来修改数据

怎么生成对象

这里我们要采用面向对象的思想来生成对象。对象实际是由提前被抽象出来模板(构造函数)生成(实例化)的。

什么是构造函数

构造函数的声明从本质上来讲,和普通函数没有差别,从形式上来讲,构造函数的首字母推荐使用大写字母。从使用上来讲,使用new命令,后面跟着函数的调用,这样的函数就被叫做构造函数,是用来生成对象的。

function Person() {

}
console.log(Person());
var p1 = new Person()
console.log(p1);
console.log(typeof(p1));

new命令和this

使用new命令时,它后面的函数依次执行下面的步骤。

  1. 创建一个空对象,作为将要自动返回的对象。
  2. 将这个空对象的原型指向构造函数的prototype属性
  3. 将空对象赋值给函数内部的this关键字
  4. 开始执行构造函数内部的代码
// 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()