正文
JavaScript基础-04-对象、函数
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
对象
1. 对象： 使用基本数据类型的数据，创建的变量都是独立的，不能成为一个整体
对象属于一个复合数据类型，在对象中可以保存多个不同数据类型的属性。
对象的分类：
（1）内建对象：由ES标准中定义的对象，在任何的ES的实现中都可以使用（Math，string,number）
（2）宿主对象：由JS的运行环境提供的对象，目前来说主要指由浏览器提供的对象（BOM）
（3）自定义对象：由开发人员自己创建的对象
2. 创建对象
使用 new关键字 调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数
在对象中保存的值称为属性， 向对象添加属性
语法：对象.属性名=属性值；
向obj中添加一个name/gender/age属性
Obj.name=”孙悟空”;obj.gender=”男”;obj.age=18;
3. 读取对象中的属性
语法：对象.属性名
console.log(obj.gender);
var
obj
=new
Object
();
obj
.name="孙悟空";
obj
.age=18;
obj
.gender="男";
console
.log(
obj
.name);
4. 修改对象属性值
语法：对象.属性名=新值;
删除对象的属性
语法：delete 对象.属性名
delete obj .age
5. 对象的属性名 不强制要求准守标识符 的规范，任何名字都可以
obj.var=”hello”;
如果要使用 特殊的属性名 ， 不能采用.的方式 来操作，需要使用另一种方式
语法：对象[“属性名”]=属性值
var
obj
=new
Object
();
obj
["123"]=234;
var
n
="123";
console
.log(
obj
[
n
]);
6. 属性值： JS对象的属性值，可以是任意的数据类型，也可以是一个对象。
var
obj
=new
Object
( );
obj
.test="作比较";
var
obj2
=new
Object
( );
obj2
.name="信息";
obj
.test=
obj2
;
console
.log(
obj
.test.name);
7. in 运算符
通过该运算符可以检查一个对象中是否含有指定的属性，若有则返回一个true，没有返回false;
语法：“属性名”in 对象
console .log("test2" in obj );
8. 基本和引用数据类型
基本数据类型（值类型）： 保存值
string字符串；number数值；boolean布尔值；null空值；undefined 未定义；
引用数据类型：object对象 保存地址
var
obj
=new
Object
();
obj
.name="花花";
var
obj2
=
obj
;
obj
.name="大大"
console
.log(
obj
.name);
console
.log(
obj2
.name);
JS中的变量都是保存到栈内存中， 基本数据类型直接保存在栈内存中 ，值与值之间是独立存在，修改一个变量不会影响其他的变量。
对象保存在堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的空间，而变量保存的是对象的内存地址（对象的引用）。如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响。
|
变量 |
值 |
|
b |
123 |
|
a |
123 |
1. 对象字面量
使用对象字面量来创建一个对象，使用对象字面量，可以创建对象时，直接指定对象中的属性。
语法：{属性名：属性值，属性名：属性值，......}
对象字面量的属性名可以加引号也可以不加，建议不加；但特殊的名字，则必须加引号。
var
obj
={
name:'猪八戒',
age:18,
gender:'男',
'123':123
};
console
.log(
obj
);
函数function
1. 函数也是一个对象，函数可以封装一些功能（代码），在需要时可以执行这些功能（代码）
创建一个函数对象：
var fun=new Function()
可以将要封装的代码以 字符串的形式 传递给结构函数，封装到函数中的代码不会立即执行。函数中的代码会在函数调用的时候执行。调用函数时，函数中封装的代码会按照顺序执行。
调用函数：函数对象（） //fun( );
var
fun
=new
Function
("console.log('第一个函数')")
fun
();
2. 使用函数声明来创建一个函数
语法：function 函数名（[形参1，形参2....形参N]）{
语句.......
}
function f() {
console
.log('第er个函数')
}
f();
3. 使用函数表达式来创建一个函数
var 函数名=function ([形参1，形参2，...形参n]) {
语句....
}
4. 函数（）中可以指定一个或多个形参，形参之间利用，隔开，声明形参就相当于在函数内部声明对应的变量，但不赋值。
在调用函数时，可以在（）中指定实参，将会赋值给函数中对应的形参。
注意： 调用函数时解析器不会检查实参的类型。实参可以是任意的数据类型。
调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值。若实参的数量少于形参的数量，则没有对应实参的形参将是undefined
- 返回值
可以使用return来设置函数的返回值
语法：return 值
var sum=function (a,b) {
var c=a+b;
return c;}
sum(3,5);
return后的值将会作为函数的执行结果返回，可以 定义一个变量 ，来接收该结果
var sum=function (a,b) {
var c=a+b;
return c;}
var
result
=sum(3,5);
console
.log(
result
);
2. 返回值的类型
返回值可以是任意类型：对象，数值，函数.....
function fun1() {
return {name:'黎明'};}
var
a
=fun1();
console
.log('a='+
a
.name);
嵌套函数:fun2函数在fun1内，fun1调用fun2，外部执行fun1，就会调用fun2
function fun1() {
function fun2() {
alert('我是fun2')}
fun2();}
fun1();//a=fun1();console.log(a);//a();//fun1()();
5. 立即执行函数
函数定义之后立即被执行，往往只会执行一次。
(function () {
alert('这是一个匿名函数');
})();
6. 方法
函数也可以称为对象的属性，一个函数作为对象的属性保存， 该函数称为这个对象的方法 。调用函数就是调用对象的方法。-----封装在对象中的函数叫方法
var
obj
=new
Object
();
obj
.name='小明';
obj
.sayName=function () {
console
.log(
obj
.name);};
obj
.sayName();
7. 枚举对象中的属性
使用for....in语句
语法：
for(var 变量 in 对象){
console.log(‘hello’);} //出现几次就执行几次
每次执行时，会将对象中的一个属性的名字赋值给变量
var
obj
=new
Object
();
obj
.name='小李';
obj
.age=43;
obj
.gender='男';
obj
.address='华夏小区';
for(var
n
in
obj
){
console
.log(
n
);属性名} //
console
.log(
obj
[
n
]);属性值
8. 作用域
一个变量的作用范围：
全局作用域： 直接编写在script标签中的JS代码，在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局对象window，代表一个浏览器的窗口，由浏览器创建可直接使用。
创建的变量都可以作为window对象的属性保存；创建的函数都会作为window对象的方法保存。
全局变量，在页面任意的部分都可以访问。
var
a
=10;
console
.log(
window
.a);
9. 变量声明提前： 使用 var关键字 声明的变量，会在所有代码执行之前被声明，不会赋值
console
.log(
a
);
var
a
=10; //不会报错，但a=10会报错
10. 函数声明提前： 使用函数声明形式创建的函数function函数（）{}，会在所有代码执行之前被创建，所以可以在函数声明前来调用。
使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用。
fun(); //会被执行！！
fun2(); //不会被执行！！
function fun() {
console
.log('我是一个fun函数');}
var fun2=function () {
console
.log('我是一个fun2函数')}
11. 函数作用域： 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁。每调用一次函数就会创建一个新的函数作用域，之间相互独立。
函数作用域中可以访问到全局变量，全局作用域无法访问到函数作用域的变量。在函数作用域操作一个变量时，会先在自身作用域中寻找，若有直接使用，若没有则向上一级作用域中寻找，直到找到全局作用域，若没有就会报错。
在函数作用域也会有声明提前的特性，使用var关键字声明的变量，会在函数中所有的代码执行之前被声明。
函数中，不适用var声明的变量都会变成全局变量。
var
c
=10;
function fun1() { //fun1(c) 定义形参=在函数作用域中声明变量
console
.log(
c
);
c
=10; //var c=10结果为undefined
}
fun1();
- debug
F12-->脚本-->断点
2. this
解析器在调用函数每次都会向函数内部传递进一个隐含的函数this，this指向的是一个对象，根据函数的调用方式的不同，this会指向不同的对象。
谁调用函数，this就会指向谁；
12. 函数方式 调用，this指向window
function fun() {
console
.log(this);
}
fun(); //结果为windo
以方法形式调用 时，this就是调用方法的对象
function fun() {
console
.log(this);}
var
obj
={name:'小明',
sayName:fun};
obj
.sayName(); //结果为对象obj
以构造函数的形式调用时，this就是新创建的那个对象
13. 根据调用者的不同调用：
var
name
='全局';
function fun() {
console
.log(this.name);} //不用this只会显示’全局’
var
obj1
={ name:'小明',
sayName:fun};
var
obj2
={ name:'花花',
sayName:fun};
obj2
.sayName();
14. 使用工厂方法创建对象
通过该方法大批量的创建对象，将公共代码写成一个函数，不用重复写代码
缺点：创建对象都是object这个类型，导致无法区分多种不同类型的对象。
function createPerson(name,age,gender) {
// 创建一个新的对象
var obj=new
Object
();
// 向对象中添加属性
obj.name=name;
obj.age=age;
obj.gender=gender;
obj.sayName=function () {
console
.log(this.name); }
// 将新的对象返回
return obj;}
var
obj1
=createPerson('小敏',13,'男');
obj1
.sayName();
15. 构造函数 加new
创建一个构造函数，专门来创建Person对象，构造函数是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写
区别： 构造函数和普通函数的区别就是调用方式不同，普通函数直接调用，构造函数需要使用new关键字来调用。
构造函数的执行流程：
- 立刻创建一个新的对象
- 将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
- 逐行执行函数中的代码
- 将新建的对象作为返回值返回
普通函数：
function Person() {
}
var
per
=Person(); //结果为undefined
构造函数：
function Person() {
alert(this);
}
var
per
=new Person();
console
.log(
per
); //结果为 object
例如：（类）
function Person(name,age,gender) {
this.name=name;
this.age=age;
this.gender=gender;
this.sayName=function () {
alert(this.name);
}
}
var
per
=new Person('花花',12,'男');
console
.log(
per
);
16. 使用instanceof可以检查一个对象是否是一个类的实例
语法：对象 instanceof 构造函数 （per instanceof Person）
如果是，则返回true，否则返回false
console
.log(
per
instanceof Person);
console
.log(
dog
instanceof Person);
17. 所有的对象都是object的后代，所以任何对象和Object做instanceof检查时会被返回true
console .log( per instanceof Object );
18. 构造函数的修改
创建一个Person构造函数：在Person构造函数中，为每一个对象都添加一个sayName方法，目前的方法是在构造函数内部创建的，所以构造函数每次执行都会创建一个新的sayName方法，每一个构造函数sayName都是唯一的。
解决方法：
1.将sayName方法在全局作用域中定义
function Person(name,age,gender) {
this.name=name;
this.age=age;
this.gender=gender;
this.sayName=fun;}
function fun() {
alert(this.name);}
但是将函数定义在全局作用域，污染了全局作用域的命名空间，而且很不安全
2. 原型prototype：创建的每一个函数，解析器都会向函数中添加一个属性prototype；
该属性对应一个对象，这个对象就是原型对象
如果函数作为普通函数调用prototype没有任何作用；当函数以构造函数的形式调用时，它所构建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，可通过 __proto__ 来访问该属性。
原型对象==一个公共区域，所有同一个类的实例都可以访问到这个原型对象，可以将对象中共有的内容，统一设置到原型对象中。
当访问对象的一个属性或方法时，它会先在对象自身中寻找，若有则直接使用。
function Person() { }
// 向Person的原型中添加属性a
Person.prototype.a=123;
//向Person的原型中添加一个方法
Person.prototype.sayHello=function () {
alert('hello');}
var
mc1
=new Person();
var
mc2
=new Person();
mc1
.a='我是mc中的a';
console
.log(
mc1
.a); //先在mc1中寻找，有，a='我是mc中的a'；
console
.log(
mc2
.a); //mc中未找到，在原型对象中寻找a=123；
mc2
.sayHello();
20. 原型对象
使用 in 检查对象中是否含有某个属性时，若对象中没有但原型中有，返回true。
使用对象的 hasOwnProperty() 来检查对象中是否含有该属性，使用该方法只有当对象自身含有属性时，才会返回true。
function MyClass() {}使用对象的hasOwnProperty()来检查对象中是否含有该属性
MyClass.prototype.name='我是原型中的名字';
var
mc
=new MyClass();
//使用in检查对象中是否含有某个属性时，若对象中没有但原型中有，返回true
// console.log('name' in mc);
//使用对象的hasOwnProperty()来检查对象中是否含有该属性
mc
.a=123;
console
.log(
mc
.hasOwnProperty('name')); //结果false
console
.log(
mc
.hasOwnProperty('a')); //结果true
原型对象也是对象，所以它也有原型，当使用一个对象的属性或方法时，会先在自身中寻找，自身有则直接使用，若没有则去原型对象中寻找，若原型对象中有就使用，若没有则去原型的原型中寻找，直到找到Object对象的原型，Object对 象的原型没有原型，如果在Object中依然没有找到，则返回undefined
console .log( mc .__proto__.__proto__.hasOwnProperty('hasOwnProperty'))
