理解JS中的对象与构造函数

对象

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）

//声明一个对象
var person = {
	name : ['Bob', 'Smith'],
	age : 32,
	gender : 'male',
	interests : ['music', 'skiing'],
	greeting: function() {
		alert('Hi! I\'m ' + this.name[0] + '.');
	}
};

在传统的OOP语言中，对象通常通过一个类来定义，而在JS中没有“类”的概念(ES6中新增的class是语法糖，是一种特殊的function)，类的构建由构造函数承担。

构造函数

注意！一个构建函数通常是大写字母开头，这样便于区分构建函数和普通函数

构造函数有两种形式：
第一种是在构造函数内创建一个新对象，再将其返回

//语法正确，但是比较冗余
function createNewPerson(name) {
  var obj = {}; //创建一个空对象
  obj.name = name;
  obj.greeting = function () {
    alert('Hi! I\'m ' + this.name + '.');
  }
  return obj; //返回创建的对象
}
var salva = createNewPerson('salva');

第二种

//通过new构造一个对象
function Person(name) {
	//this指向当前代码运行时的对象
	this.name = name;               //属性
	this.greeting = function() {    //方法
		alert('Hi! I\'m ' + this.name + '.');
	};
}
var person1 = new Person('Bob');

除了直接声明对象或者通过构造函数构建对象，还可以使用Object()构造函数

Object()

Object构造函数为给定值创建一个对象包装器。如果给定值是 null 或 undefined，将会创建并返回一个空对象，否则，将返回一个与给定值对应类型的对象。

//1.
var person1 = new Object();   //创建一个空对象
person1.name = 'Chris';       //给该对象添加属性
//2.
var person2 = new Object({    //直接传入对象文本
  name : 'Chris',
  age : 38,
  greeting : function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});
//3.
var person3 = Object.create(person2); //基于现有对象创建新对象

Function()

Function构造函数创建一个新的Function对象。 在 JavaScript 中, 每个函数实际上都是一个Function对象。

注意！使用Function构造器生成的函数，并不会在创建它们的上下文中创建闭包；它们一般在全局作用域中被创建。当运行这些函数的时候，它们只能访问自己的本地变量和全局变量，不能访问Function构造器被调用生成的上下文的作用域

var n = 1;
function fn(){
    var n = 2;
    var f = new Function("return n;"); //函数f是通过Function构造起在全局域中创建的，所以访问不到fn中的n
    return f;
}
f()() //1

普通对象和函数对象

凡是通过 new Function() 创建的对象都是函数对象，其他的都是普通对象。

//Object 普通对象
var o1 = {}; 
var o2 =new Object();
var o3 = new f1();          //通过构造函数创建的对象是普通对象

//Function 函数对象
function f1(){};            //构造函数本身是函数对象
var f2 = function(){};      //每个函数实际上都是一个Function对象
var f3 = new Function('str','console.log(str)');

---

参考

1. https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_JS
2. https://www.jianshu.com/p/dee9f8b14771