JavaScript函数与对象

JavaScript函数与对象

一、JavaScript函数

函数就是将重复的代码,进行封装,需要时就直接调用。

函数的作用:代码的重用;

1、函数定义

//函数定义
function 函数名(){
    函数体;
}
//函数调用
函数名();
//求两个数之和
function mySum(){
    var num1 = 10;
    var num2 = 20;
    var sum = num1 + num2;
    console.log(sum);
}
//函数调用
mySum();

函数需要注意的问题:

1、函数需要先进行定义,才能使用;

2、函数的名字:遵循驼峰命名法规则;

3、函数一旦重名,后面的函数将会覆盖前面的函数;

4、一个函数最好就是一个功能;

2、函数的参数

函数在定义时候,函数名后面的小括号里的变量就是参数,函数参数的作用就是在被调用时可以根据特定的需求进行传入特定的参数操作,已达到所需的需求。函数的参数,使得函数更加灵活。

函数也是一种数据类型;数据类型是方function类型。

//两个数之和
function mySum(x,y){
    var sum = x + y;
    console.log(sum);
}

1、形参与实参

形参:函数在定义时,小括号里的变量就是形参;

//两个数之和
function mySum(x,y){
    var sum = x + y;
    console.log(sum);
}
//此时的x与y就是形参

实参:函数在调用时,传入的值就是实参;实参可以是变量,也可以是具体值;

//两个数之和
function mySum(x,y){
    var sum = x + y;
    console.log(sum);
}
//函数调用
mySum(10,20);
//20,30就是实参,传入到函数中

2、函数的返回值

返回值:在函数内部有return关键字,并且在关键字后面有内容,这个内容就会被返回,称为返回值。函数在调用后,需要这个返回值时,只需定义变量接收该返回值,即可。

函数中一旦遇到return关键字,整个函数结束了。

function (x,y){
    return x+y;
}
//接收返回值
var result = function(10,20);

3、函数案例


//求两个数中的最大数
function getMax(x, y) {
    return x > y ? x : y;
}
console.log(getMax(10, 20));
//求三个数中最大数
 function getMax3(num1, num2, num3) {
     var temp = num1 > num2 ? num1 : num2;
     return temp > num3 ? temp : num3;
 }

 console.log(getMax3(1, 4, 3));

 function getThreeMax(x, y, z) {
     return x > y ? (x > z ? x : y) : (y > z ? y : z);
 }

 console.log(getThreeMax(1, 4, 2));

 //判断一个数是否为素数,只能被1和自身整除,质数是从2开始的
 function getPrimeNumber(num) {
     for (var i = 2; i < num; i++) {
         if (num % i == 0) {
             return false;
         }
     }
     return true;
 }

 var result = getPrimeNumber(7);
 if (result) {
     console.log("是质数");
 } else {
     console.log("不是质数");
 }

4、匿名函数

函数如果没有名字,就称之为匿名函数;

匿名函数定义:

//匿名函数
function (){
    函数体;
}
//匿名函数不能直接调用
//匿名函数需要被调用时,需要通过函数表达式来调用
函数表达式:
var 变量名 = 匿名函数;
var func = function(){
    函数体;
}

5、函数作为参数使用

function f1(fn){
    fn();//函数调用
}
//区分:
function f1(fn());//这个是将fn()的返回值做参数,而不是函数做参数

6、函数作为返回值使用

function f1(){
    return function(){
        函数体;
    }
}

var fn = f1();//当f1调用时,把function匿名函数赋给了fn变量,此时的fn变量是一个函数了

二、作用域

作用域:使用范围

全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用

​ 除了函数以外,其他的任何位置定义的变量都是全局变量。

局部变量:在函数内部定义的变量,是局部变量,外面不能使用全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存。

全局作用域:全局变量的使用范围。

局部作用域:局部变量的使用范围。

块级作用域:一对大括号就可以看成是一块,在这块区域中定义的变量,只能在这个区域中使用,但是在js中在这个块级作用域中定义的变量,外面也能使用。

说明:js没有块级作用域,只有函数除外

隐式全局变量:声明的变量没有var,就叫隐式全局变量

全局变量是不能被删除的,隐式全局变量是可以被删除的

定义变量使用var是不会被删除的,没有var是可以删除的

三、JavaScript面向对象

JavaScript不是面向对象语言,是模拟向对象思想;是一门基于对象的语言。

1、创建对象

创建对象有三种方式:

1、调用系统的构造函数创建对象

//创建对象
var obj = new Object();//实例化一个对象
//添加对象属性与属性值
obj.name = "小明";
obj.sex = "男";
obj.age = 22;
//添加对象方法,即对象行为
obj.eat=function(){
    console.log("我的爱好是吃!");
};
obj.play = function (){
    console.log("我喜欢玩!");
};
//调用对对象属性与方法
console.log(obj.name);
console.log(obj.sex);
console.log(obj.age);
obj.eat();
obj.play();

2、自定义构造函数创建对象(结合第一种和需求通过工厂模式创建对象)

工厂模式创建对象

//工厂模式创建对象
function createObject(name,age,sex) {
    //创建对象
    var obj = new Object();
    //添加属性
    obj.name = name;
    obj.age = age;
    obj,sex = sex;
    obj.say=function () {
      console.log("hello, I am "+this.name);
    };
    return obj;  //返回该对象
};
var person = createObject("小芳",20,"女");
person.say();

自定义构造函数创建

//自定义构造函数创建对象
function Person(name,age,sex) { //自定义构造函数,函数系统里没有,自定义的,函数名大写
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.say = function () {
        console.log("hello I am "+this.name);
    };
};
var person = new Person("小明",23,"男");
person.say();

new 对象时,系统所做的事情。
自定义构造函数创建对象做了四件事:
1、在内存中开辟空间,存储创建新的对象
2、把this设置为当前对象
3、设置对象属性和方法值
4、将this这个对象返回

自定义构造函数创建对象与工厂模式创建对象的区别:

a、工厂模式创建对象,是定义函数,在函数中创建对象;函数中需要将对象返回;

b、自定义构造函数创建对象,函数名大写,通过this关键字设置属性,无需返回对象。

c、工厂模式创建对象方式是:定义变量,调用函数创建:var person = createObject(“小芳”,20,“女”);

​ 自定义构造函数创建对象:通过new关键字创建对象:var person = new Person(“小明”,23,“男”);

3、字面量方式创建对象

var obj = {}; //空对象
//添加属性
obj.name = "小明";
obj.age = 20;
obj.sex = "男";
obj.say = function (){
     console.log("hello I am "+this.name+"今年"+this.age+"岁");
}
obj.say();
//字面量方式创建对象
var  obj ={
    name:"小明",
    age:20,
    sex:"男",
    say:function () {
        console.log("hello I am "+this.name);
    }
}
obj.say();
//字面量方式创建对象
var  obj ={
    name:this.name,
    age: this.age,
    sex:this.sex,
    say:function () {
        console.log("hello I am "+this.name+"今年"+this.age+"岁");
    }
}
obj.name="小明";
obj.age=20;
obj.sex="男";
obj.say();

猜你喜欢

转载自blog.csdn.net/weixin_43220261/article/details/84137354
今日推荐