JS-对象-构造函数-实例化-this

1 回顾

1. 定义函数的方式function 关键字表达式方式Function 构造函数2. 函数的调用和返回值3. 函数的参数形参和实参形参的默认值arguments4. 变量的作用域和作用域链5. 变量提升和函数提升6. 匿名函数7. 自调用函数（立即执行的函数）8. 回调函数9. 递归函数

2 Object 对象

2.1 什么是 Object

Object 是值的无序集合。Object 由属性组成，属性有属性名和属性值。属性的值可以是任意类型的数据，属性值如果 function 类型的数据，这种属性可以成为方法。

2.2 如何声明 Object 对象

① 第一种 直接量方式

// 创建一个空的的对象var obj1 = {};// 创建一个带有属性的 object 类型的数据var obj2 = {name: '芳芳', age: 18,getInfo: function() {console.log('get info 函数');},users: [100, 200, 300, 400],'address': '上海','user-info': 'hello'};

注意：属性名的形式是字符串，属性名的格式没有任何要求； 如果属性名满足标识符的命名规范（变量的命名规范），可以省略引号。

② 使用 Object 函数

var obj = Object();

③ 使用 Object 构造函数

var obj = new Object();

2.3 Object 对象属性的读写

① 语法

// 点语法obj.属性名;obj.属性名 = 值;// [] 语法obj['属性名'];obj['属性名']();

// 修改object中的属性值obj.name = '王';obj['age'] = 25;obj.address.area = '无锡';console.log(obj)// 读写object不存在的属性:undefined console.log(obj.grade); //undefined//obj.getName(); //报错 函数会报错 undefined后面加了括号// 不存在的属性进行设置：添加obj.job = '学生';console.log(obj);

② 什么情况下必须使用 [] 语法读写属性

1. 属性名不满足标识符命名规范2. 使用变量表示属性名

// 创建对象var obj = {address:'上海','get-info':'hello',}// 给obj设置属性// 设置属性名user-name（用.要符合规范：数字，字母，下划线obj['user-name'] = '芳芳';obj.age = 100;console.log(obj);// 定义变量，把属性名赋值给了变量：.undefined 属性名就是字符串，没有引号就是变量var attr = 'adderss';console.log(obj.attr); //undefinedconsole.log(obj[attr]); //上海

2.4 遍历对象的属性

// for in 遍历 Object 所有的属性for (var prop in obj) {console.log(prop, obj[prop]);}

2.5 删除对象中的属性

使用 delete 运算符，删除对象中的属性。

delete 对象.属性名;delete 对象['属性名'];

2.6 判断对象中是否存在某个属性

使用 in 运算符，这是二元运算符，组成的表达式返回布尔值。

'属性名' in 对象

var obj = {name: '芳芳', age: 18,getInfo: function() {console.log('get info 函数');},users: [100, 200, 300, 400],address: {city: '上海',area: '松江'},pwd :undefined};// 使用in判断是否存在属性getInfoconsole.log('getInfo' in obj); //tureconsole.log('name' in obj); //truevar prop = 'address';console.log(prop in obj); //tureconsole.log('grade' in obj) //falseconsole.log('pwd' in obj); //trueconsole.log('')console.log(obj.grade); //undefinedconsole.log(obj.pwd); //undefined

广义的对象

// 定义数组var arr =[100,200,300,400,500];// 定义函数var fn = function() {};// 读写arr的属性（自带的属性）console.log(arr.length,arr['length']); //5 5console.log('')// 给arr设置属性arr.username = '芳芳';arr['get-info'] = function() {};console.log(arr);console.log('');// 使用for in遍历数组中的属性for (var i in arr) {console.log(i,arr[i]);}console.log('');fn.name = '芳芳';fn.age = 18;console.log(fn.name); //fnconsole.log(fn.age); //18console.log('name' in fn); //trueconsole.log('age' in fn); //true

3 构造函数

3.1 什么是构造函数？

JS 中的构造函数相当于其他编程语言中的类。

构造函数用于产生创造一个对象。

相同数据类型的对象，构造函数必定是一致的。数据类型等价于构造函数。

3.2 构造函数和对象的关系

构造函数是对象的抽象（描述），对象是构造函数的实例。

一个构造函数可以对应多个对象，一个对象只能有一个构造函数。

3.3 判断对象的构造函数

① 运算符 instanceof

判断一个对象是否是某个构造函数的实例，这是一个二元运算符，所组成的表达式的值是布尔值

对象 instanceof 构造函数;

// 创建对象var obj = {};var arr = [];var fn = function() {};//var str = ''; //falsevar str = new String;var num = 100;// 判断一个对象是否是某个构造函数的实例console.log(arr instanceof Array);//trueconsole.log(arr instanceof Function); //falseconsole.log(fn instanceof Function); //trueconsole.log(str instanceof String); //trueconsole.log({}.constructor); //ƒ Object() { [native code] }console.log(function(){}.constructor); //Function()console.log('hello'.constructor);//String()console.log(true.constructor); //boolean()console.log((198).constructor); //Number()console.log(198.09.constructor); //Number()console.log(198..constructor); //单独的数字不行，可以加小括号，小数或者两个点

② constructor 属性

所有的对象都具有 constructor 属性，通过该属性可以得到对象的构造函数。

对象.constructor

3.4 自定义构造函数

// 自定义构造函数function User(username, pwd, address) {// 给对象设置属性this.username = username;this.pwd = pwdthis.address = address;// 给对象设置方法this.getInfo = function() {console.log('我叫' + this.username + '，我的密码是' + this.pwd + '，我的地址是' + this.address);};}// 实例化构造函数（new）var u = new User();console.log(u); //属性和方法console.log(u instanceof User); //trueconsole.log(u.constructor);console.log(u.username,u.address); //admin 上海u.getInfo(); //我叫admin，我的密码是123123，我的地址是上海console.log('')// 实例化构造函数再产生一个对象var u1 = new User();u1.getInfo(); //我叫admin，我的密码是123123，我的地址是上海

构造函数特点总结：

函数还是构造函数取决于怎么去用，如果实例化就是构造函数，调用就是函数。实例化构造函数的时候，函数中的语句都会被执行到。构造函数函数中的 return 语句对实例化结果的影响：① 如果构造函数没有返回值或者返回原始类型的数据，对实例化结果毫无影响。 ② 如果构造函数返回一个对象类型的数据，实例化的结果就是该返回值。

// 自定义构造函数function User(username,pwd,address) {// 给对象设置属性this.username = username;this.pwd = pwd;this.address = address;// 给对象设置方法this.getInfo = function() {console.log('我叫' + this.username + '，我的密码是' + this.pwd + '，我的地址是' + this.address)}}// 实例化User构造函数 var u1 = new User('芳芳','123','上海');var u2 = new User('王','123456','无锡');console.log(u1);console.log(u2);u1.getInfo(); //我叫芳芳，我的密码是123，我的地址是上海u2.getInfo(); //我叫王，我的密码是123456，我的地址是无锡

3.5 实例化

使用 new 关键字实例化构造函数，可以创建出该构造函数的实例（对象）。

new 构函数函数()

构造函数和函数

function User() {// console.log('hello User');// return [100,200,300];return 100;}// 实例化uservar u = new User();console.log(u); //[100,200,300]console.log('')var r = User(); //100console.log(r);

4 this

4.1 this 的含义

1） this 是 JS内置的一个变量，本质上是一个对象。

2）通常在函数或方法当中使用，代表这个函数的调用者。

4.2 this 的指向

this 的指向就是 this 的值， this 在不同的地方使用，this 的指向是不同的。

this 的指向分为两种情况：

1 在构造函数中使用 this：this 指向构造函数的实例。

2 在方法（函数）中使用 this：谁调用了该方法，this 指向谁。

调用是方法，new是构造

4.3 window 介绍

js中有个一全局对象，运行在浏览器上的js，全局对象是 window。全局变量（包括全局函数）其实本质上是全局对象的属性（或方法）。使用全局对象的属性或方法，可以省略window.

console.log(this); //windowconsole.log('');// 定义全局变量（全局变量就是全局对象的属性）// 定义全局变量var username = '芳芳';// 定义全局function fn() {console.log('我是fn');}console.log(username); //芳芳console.log(window.username); //芳芳fn();//我是fn (省略window)window.fn(); //我是fn console.log('')// 使用window上的属性，可以省略windowwindow.address = '上海';console.log(address);//上海console.log(name); //空字符串console.log(length);//0console.log(''); function fn() {var username = '曹操';window.username = '吕布';window.name = '诸葛亮';console.log(username); //曹操}fn();console.log(name); //诸葛亮console.log(username); //吕布