web前端javaScript笔记——（4）方法

方法

调用方法

obj.sayName();

调用函数

fun();

函数也可以称为对象的属性如果一个函数作为一个对象的属性保存,那么我们称这个函数是这个对象的方法，调用这个函效就说调用对象的方法(method)

但是它只是名称上的区别没有其他的区别

var obj2 = {

name:"猪八戒”,

age:18,

sayName:function(){

console.log(obj2.name)

};

obj2.sayName(); ??//打印输出：猪八戒

for..in.. 枚举对象中的属性

var obj={

name:”孙悟空”,

age:18,

gender:”男”

};

//枚举对象中的属性

//使用for.....in语句

for(var n in obj){

console.log(n);

}

打印输出 name ?age ?gender

for(var n in obj){

console.log(obj.n);

}

打印输出 undefined ??undefined ?undefined

for(var n in obj){

???console.log(obj[n]);

???}

打印输出 孙悟空 ?18 ?男

作用域（全局作用域 ?函数作用域）

作用域

作用域指一个变量的作用的范围，在JS中一共有两种作用域

1.全局作用域

直接编写在script标签中的JS代码，都在全局作用城

全局作用域在页面打开时创建，在页面关闭时销毁

在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用

在全局作用域中，创建的变量都会作为window对象的属性保存

创建的函数都会作为window对象的方法保存

全局作用域中的变量都是全局变量，在页面的任意部分都是可以访问到的

var a=10;

var b=20;

console.log(window.b); ?????//20

console.log(window.c); ???????//undefined

变量的声明提前：

1. 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值）
2. 但是如果声明变量时不使用var 关键字，则变量不会被提前声明。

console.log(“a=”+a);

var a=123; ????

打印输出a=undefined

console.log(“a=”+a);

a=123;

会报错 a is not defined

函数的声明提前：

使用函数声明形式创建的函数function 函数(){},它会在所有的代码执行之前就被创建

函数声明会被提前创建，函数表达式，不会被提前创建

fun();

function fun(){console.log("我是一个fun函数");} ????//函数声明，会被提前创建

//打印输出：我是一个fun函数

var fun2 = function(){console.log("我是fun2函数");}; ??//函数表达式，不会被提前创建

fun2();

//打印输出:我是一个fun2函数

2.函数作用域

调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁

每调用一次函效就会创建一个新的函数作用域，他们之间是互相独立的

在函数作用域中可以访问到全局作用域的变量

在全局作用域中无法访问到函数作用域的变量

当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用

如果没有则向上一级作用域中寻找，真到找到全局作用域，

如果全局作用域中依然没有找到，则会报惜ReferenceError

function fun3()(

console.log(a);

var a = 35;

}

fun3();

//打印输出 undefined

function fun3(){

fun4(); ????

var a=35;

function fun4(){ ????????????//会声明提前

alert(“I’m fun4”);

}

}

fun3();

//运行结果，会弹出对话框，I'm fun4

在函数作用域中也有声明提前的特性

使用var关键字声明的变量，会在函数中所有的代码执行之前被声明

函数声明也会在函数中所有代码执行之前

var c=33;

function fun5(){

console.log(“c=”+c);

}

fun5(); ???//打印输出c=33

var c = 33;

function fun5(){

console.log("c = "+c);

var c = 10;

}

fun5();??????//打印输出c=undefined

在函数中，不使用var声明的变量都会变成全局变量

function fun5(){

d=100;

}

fun5();

//在全局输出c

console.log(“d=”+d); ??//打印输出d=100

定义形参就相当于在函数作用域中声明了变量

var e=23;

function fun6(e){
alert(e);

}

fun6(20);

//打印弹出20

var e=23;

function fun6(e){

var e;

alert(e);

}

fun6();

//打印弹出undefined

var e=23;

function fun6(e){

alert(e);

}

fun6();

//打印弹出undefined

this知识点

解析器在调用函数每次都会向函数内部传递进一个隐合的参数，这个隐含的参数就是this

function fun(a,b){

console.log(this);}

打印输出 [object Window]

这个隐含的参数就是this，this指问的是一个对象，这个对象我们称为函数执行的 上下文对象，根据函数的调用方式的不同，this会指向不同的对象

以函数的形式调用的时候，this永远都是window

以方法的形式调用的时候，this就是调用方法的那个对象

function fun(a,b){

console.log(this);}

//创建一个对象

var obj={

name:”孙悟空”;

sayName:fun; ???//函数作为属性值

};

console.log(obj.sayName==fun); ?//打印输出true

obj.sayName(); ?//打印输出[object Object]

fun(); ?????????//打印输出[object Window]

//创建一个name变量

var name="全局";

//创建一个fun()函数

function fun(){

console.log(name);

}

fun(); ?//全局

//创建一个name变量

var name="全局";

//创建一个fun()函数

function fun(){

console.log(this.name);

}

fun(); ??//全局

//创建两个对象

var obj={

name:"孙悟空",

sayName:fun

};

var obj2={

name:"猪八戒",

sayName:fun

};

//调用obj.sayName()时可以输出obj的名字

//obj.sayName();

obj.sayName(); ??//孙悟空

obj2.sayName(); ??//猪八戒

使用工厂方法创建对象

var obj={

name:"孙悟空",

age:18,

gender:"男",

????????sayName:function(){

???????? alert(this.name); ?//弹出孙悟空

????????}

};

obj.sayName();

var obj2={

name:"猪八戒",

age:20,

gender:"男",

????????sayName:function(){

???????? alert(this.name); ?//弹出孙悟空

????????}

};

obj2.sayName(); ??//弹出猪八戒

使用工厂方法创建对象，可以大批量 的构建对象

function createPerson(){

//创建一个新的对象

var obj=new Object();

//将新的对象返回

return obj;

}

var obj2=createPerson();

console.log(obj2); ????//[object ?Object]

?function createPerson(name,age,gender){

//创建一个新的对象

var obj=new Object();

obj.name=name;

obj.age=age;

obj.gender=gender;

obj.sayName=function(){

alert(this.name);

};

//将新的对象返回

return obj;

}

var obj2=createPerson("孙悟空",18,"男");

var obj3=createPerson("白骨精",500,"女");

var obj4=createPerson("黄毛怪",700,"男");

console.log(obj2); ??

/*打印输出{

????"name": "孙悟空",

????"age": 18,

????"gender": "男"

}*/

构造函数

使用工厂方法创建的对象，使用的构造函数都是Object，所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象

创建一个构造函数，专门用来创建Person对象的

构造函数就是一个普通的函数，创建方式和普通函数没有区别，

不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同

普通函数是直接调用，而构造函数需要使用new关键字来调用

function Person(){

}

var per=Person();

console.log(per); ???//undefined

function Person(){

}

var per= new Person();

console.log(per); ???//我的电脑上Person{} ???讲义上[object Object]

构造函数的创建流程：

1. 立刻创建一个新的对象
2. 将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
3. 执行构造函数中的代码
4. 将新建的对象作为返回值返回

function Person(){

this.name=”孙悟空”;

this.age=18;

this.gender=”男”;

this.sayName=function(){

alert(this.name);

};

}

var per=new Person();

var per2=new Person();

var per3=new Person();

console.log(per);

/ / 打印输出{

????"name": "孙悟空",

????"age": 18,

????"gender": "男"

}

??function ?Person(name,age,gender){

???????????? this.name=name;

???????????? this.age=age;

???????????? this.gender=gender;

???????????? this.sayName=function(){

???????????? alert(this.name);

???????????? };

????????????}

????????????var per=new Person("孙悟空",18,"男");

????????????var per2=new Person("猪八戒",20,"男");

????????????var per3=new Person("玉兔精",500,"女");

????????????console.log(per); // Person{name="孙悟空",age=18,gender="男"}

????????????console.log(per2);//Person{name="猪八戒",age=20,gender="男"}

????????????console.log(per3);//Person{name="玉兔精"，age=500,gender="女"}

和使用工厂方法构造对象的代码有点相似

?function createPerson(name,age,gender){

//创建一个新的对象

var obj=new Object();

obj.name=name;

obj.age=age;

obj.gender=gender;

obj.sayName=function(){

alert(this.name);

};

//将新的对象返回

return obj;

}

var obj2=createPerson("孙悟空",18,"男");

var obj3=createPerson("白骨精",500,"女");

var obj4=createPerson("黄毛怪",700,"男");

console.log(obj2); ??

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类

function Dog(){};

var dog=new Dog();

console.log(dog); ??//打印输出 Dog(){}

使用instanceof可以检查一个对象是否是一个类的实例

语法：对象 instanceof 构造函数 ??会打印输出true或false

console.log(per instanceof Person);

console.log(dog instanceof Person)；

所有对象都是Object的后代，所以任何对象和Object做instanceof检查时都会返回true

this的情况：

1. 当以函数的方式调用时，this就是window
2. 当以方法的形式调用时，谁调用方法this就是谁
3. 当以狗杂函数的形式调用时,this就是新创建的那个对象

构造函数的改进

/*创建一个Person构造函数，

?* 在Person的构造函数中，为每个对象都添加了一个sayName方法

?* 目前我们的方法是在构造函数的内部创建的

?* 也就是构造函数每执行依次就会创建一个新的sayName方法

?* 也是所有实例的sayName都是唯一的

?* 这样就导致了构造函数每执行依次就会创建一个新的方法

?* 执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的

?* 这是完全没有必要，完全可以使用所有的对象共享同一个方法*/

????????????function ?Person(name,age,gender){

???????????? this.name=name;

???????????? this.age=age;

???????????? this.gender=gender;

???????????? //向构造函数中添加一个方法

???????????? this.sayName=fun;

????????????}

????????????//将sayName方法在全局作用域中定义

????????????/*存在的问题：将函数在全局作用域中定义，污染了全局作用域的命名空间。

?????????????* 而且定义在全局作用域也很不安全*/

????????????function fun(){

???????????? alert("hello大家好，我是："+this.name);

????????????};

????????????//创建一个Person的实例

????????????var per=new Person("孙悟空",18,"男");

????????????var per2=new Person("猪八戒",20,"男");

???????????console.log(per.sayName==per2.sayName); ?//true