js-构造函数及与原理

自定义构造函数基本使用 大驼峰

function Teacher() {
  // console.log(this);
  this.name = '张三',
  this.smoke = function () {
    console.log('抽了一只烟');
  }
}

// Teacher()   // 如果只执行的话,this指向的是window

// 实例化后的this指向实例化的对象
var tea1 = new Teacher()
var tea2 = new Teacher()
tea1.name = '李四'
// 打印的name是不一样的,互不影响
// 构造函数的复用性高
console.log(tea1,tea2);

  构造函数接受参数

// 构造函数接受参数
function Teacher(name,age) {
  this.name = name,
  this.age = age,
  this.smoke = function () {
    console.log('抽了一只烟');
  }
}

// Teacher()   // 如果只执行的话,this指向的是window

// 实例化后的this指向实例化的对象
var tea1 = new Teacher('张三',18)
var tea2 = new Teacher('李四',28)
console.log(tea1,tea2);

构造函数接收一个对象做为参数 (参考VUE)

function Teacher(opt) {
  this.name = opt.name;
  this.age = opt.age;
  this.smoke = function () {
    console.log('抽了一只烟');
  }
}

// Teacher()   // 如果只执行的话,this指向的是window

// 实例化后的this指向实例化的对象
var tea1 = new Teacher({
  name: '张三',
  age: 18
})
var tea2 = new Teacher({
  name: '李四',
  age: 38
})
console.log(tea1,tea2);

构造函数的原理

new关键字做了什么?

新建了一个空对象,这个原型对象指向构造函数的prototype,执行构造函数后,返回这个对象.

function Cart(color, brand) {
  this.color = color; //都是在this上保存的
  this.brand = brand;
  // 构造函数隐式return 一个this
  // 如果你return 引用值是有效的, return 原始值是无效的.
  // return {}  // 结果是return {}
  // return 90  // 结果是return this
}
var car1 = new Cart('red','BYD')
console.log(car1);

// GO = { 页面加载全局
//     1.Cart:function(){} ,// 执行函数
//     2.car1: { color: color, brand: brand }
// }

// AO = {
//    1.看到new,会在AO保存一个this对象.上边的是在this里
//      this: { color: color, brand: brand }
// }

// new 是为了改变this指向的.
// 1.保存一个空的this对象
// 2.把构造函数this东西写到创建的空this里
// 3.隐式加了一个 return this

// 创建一个空对象,  功能就跟new是一样的
var my = {}
my.color = 'red'
return my