JS-object-constructor-instantiation-this

最编程 2024-07-17 18:52:41

...

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

1 回顾

1. 定义函数的方式
   function 关键字
   表达式方式
   Function 构造函数
   
2. 函数的调用和返回值

3. 函数的参数
   形参和实参
   形参的默认值
   arguments

4. 变量的作用域和作用域链

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);    //undefined
console.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判断是否存在属性getInfo
console.log('getInfo' in obj); //ture
console.log('name' in obj);    //true
var prop = 'address';
console.log(prop in obj);   //ture
console.log('grade' in obj) //false
console.log('pwd' in obj);   //true

console.log('')
console.log(obj.grade);   //undefined
console.log(obj.pwd);    //undefined

广义的对象

// 定义数组
var arr =[100,200,300,400,500];
// 定义函数
var fn = function() {};
// 读写arr的属性（自带的属性）
console.log(arr.length,arr['length']);  //5 5
console.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);  //fn
console.log(fn.age);   //18
console.log('name' in fn);  //true
console.log('age' in fn);   //true

3 构造函数

3.1 什么是构造函数？

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

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

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

3.2 构造函数和对象的关系

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

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

3.3 判断对象的构造函数

① 运算符 instanceof

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

对象 instanceof 构造函数;

// 创建对象
var obj = {};
var arr = [];
var fn = function() {};
//var str = '';  //false
var str = new String;
var num = 100;
// 判断一个对象是否是某个构造函数的实例
console.log(arr instanceof Array);      //true
console.log(arr instanceof Function);  //false
console.log(fn instanceof Function);   //true
console.log(str instanceof String);    //true


console.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 = pwd
    this.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);  //true
console.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;
}
// 实例化user
var u = new User();
console.log(u);    //[100,200,300]
console.log('')

var r = User();    //100
console.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);  //window
console.log('');
// 定义全局变量（全局变量就是全局对象的属性）
// 定义全局变量
var username = '芳芳';
// 定义全局
function fn() {
console.log('我是fn');
}
console.log(username);        //芳芳
console.log(window.username); //芳芳
fn();                         //我是fn   (省略window)
window.fn();                 //我是fn    
console.log('')
// 使用window上的属性，可以省略window
window.address = '上海';
console.log(address);     //上海
console.log(name);        //空字符串
console.log(length);      //0
console.log('');  

function fn() {
var username = '曹操';
window.username = '吕布';
window.name = '诸葛亮';
console.log(username);    //曹操
}
fn();
console.log(name);       //诸葛亮
console.log(username);   //吕布

上一篇：构造函数的理解，为构造函数添加方法

下一篇： Js 中的符号对象

JS-object-constructor-instantiation-this

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

1 回顾

2 Object 对象

2.1 什么是 Object

2.2 如何声明 Object 对象

① 第一种 直接量方式

② 使用 Object 函数

③ 使用 Object 构造函数

2.3 Object 对象属性的读写

① 语法

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

2.4 遍历对象的属性

2.5 删除对象中的属性

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

广义的对象

3 构造函数

3.1 什么是构造函数？

3.2 构造函数和对象的关系

3.3 判断对象的构造函数

① 运算符 instanceof

② constructor 属性

3.4 自定义构造函数

3.5 实例化

构造函数和函数

4 this

4.1 this 的含义

4.2 this 的指向

4.3 window 介绍

JS-object-constructor-instantiation-this

① 第一种直接量方式