「案例学习」JS的构造函数（js构造函数的方法）

构造函数

所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

构造函数内部的 this

案例1：函数内部不使用 this

var f1 = function(){
	a = 1;
}
var o1 = new f1();
console.log(o1.a);  // undefined

案例2： 函数内部使用 this

var f2 = function(){
	this.a=1;
}
var o2 = new f2()
console.log(o2.a);  // 1

new 构造函数

案例3：使用 new

var o1 = new f1();
console.log( o1 );

案例4：不使用 new

var o2 =  f1();
console.log( o2 ); // undefined

函数内部的 return

案例5：没有 return 语句 , new 构造函数返回： this。

var that ;
var f3 = function(){
 	 that = this;
}
console.log('new f3())===that:',(new f3())===that); // true

案例6: return 一个对象，new 构造函数返回：该对象。

var obj ;
var f3 = function(){
 	 obj = {a:3}
  return obj;
}
console.log('(new f3())===obj:',(new f3())===obj); // true

案例7：return 一个值，new 构造函数返回： this。

var value ;
var that;
var f3 = function(){
  that = this;
 	value = 1;
  return value;
}
console.log('(new f3())===value:',(new f3())===value); // false
console.log('(new f3())===that:',(new f3())===that); // true 实际返回 this

保证构造函数必须与 new 命令一起使用

案例8：使用 'use strict'

function f4(){
  'use strict';
  this.a = 2;
}

f4() // 没有使用new: 报错 
//原因：由于严格模式中，函数内部的this不能指向全局对象，默认等于undefined，导致不加new调用会报错（JavaScript 不允许对undefined添加属性）

案例9：在构造函数内部判断

function f5(){
  if( !( this instanceof  f5 ) ){
    return new f5();
  }
 this.a =1; 
}
console.log( new f5().a ); // 使用new: 1
console.log( f5().a ); //  没有使用new: 1  

案例10：new.target

function f6() {
  if (!new.target) { // 如果当前函数是new命令调用，new.target指向当前函数，否则为undefined。
    throw new Error('请使用 new 命令调用！');
  }
  // ...
}

f6() // 没有使用new: 报错

通过现有的对象创建一个新对象

案例11：

var obj1 = { a:1 }
var obj2 = Object.create(obj1)
console.log('obj1===obj2',obj1===obj2) //false

注：本案例根据阮一峰 js 教程学习总结，推荐前往阅读！

参考：https://wangdoc.com/javascript/oop/new.html