JS之面向对象

你的名字 2021-12-12 03:35 236阅读 0赞

函数在js中是非常重要的一个概念，当使用js定义一个函数时，实际上得到的如下五项：

**1.函数：就像java方法一样可以被调用。**

**2.对象：定义一个函数时，系统也会创建一个对象，该对象时function的实例。**

**3.方法：定义一个函数时，该函数通常都会附加给某个对象，作为该对象的方法。**

**4.变量：在定义函数的同时，也会的到一个变量。**

**5.类：在定义函数的同时，也会得到一个与函数同名的类。**

**函数不仅可以作为函数使用，它本身也时一个对象，是Function的实例**。如下：

var f = function(){
      console.log(aa);
    };
    console.log(f instanceof Function);

结果：

true

可以看到在创建function 的时候也创建了一个function的实例，并将function实例赋值给f；

**js的函数不仅仅是一个函数，更是一个类，在定义一个js的函数时，也会的到一个与该函数名相同的类，该函数也是该类唯一的构造器。**

所以函数在调用的时候有两种方法

一：直接调用；直接调用返回该函数体内最后一个return语句的返回值；如果函数体内没有返回值，则返回值为空。

二：通过“new”关键字来调用；返回的是一个js对象。

var f = function(name){
      return "你好"+name;
    };
    var demo1 =f("骚小孩");
    var demo2 = new f("小明");
    console.log(demo1);
    console.log(demo2);

结果：

你好骚小孩
    f {}

可以看到第一demo1（直接调用）返回的是一个字符串，然后通过new关键字来调用返回的是一个f\{\}对象。

**为js对象添加属性和方法**

我们可以通过在函数nei使用this.属性名=属性值；为js对象添加属性或方法。

var f = function(name,age){
        this.name=name;
        this.age=age;
        this.introduce=function(){
            console.log(this.name);
            console.log(this.age);
        }
    };
    var demo2 = new f("小明","11");
    demo2.introduce();

结果：

小明
    11

**被this关键字修饰的变量不再是局部变量，他是函数的实例属性。**

**js的函数可以附加到某个对象上的，如果没有指定将函数加到那个对象上，那么就会附加到window上。**

function say(word){
        console.log("say "+word);
    }
    window.say("aaa");

结果：

say aaa

**函数在定义的时候也会产生也会引入一个变量，该变量名与函数名相同，所以尽量避免函数名与变量名重复。**

function say(word){
        console.log("say "+word);
    }
    say("aaa");
    say="nihao";
    say("bb");

结果：

say aaa
    报错

上面说了函数不仅仅是一个对象还是一个类，那么在这个类中有：

1：局部变量；通过var 来声明；

2：实例属性：通过this前缀修饰；

3：类属性：通过函数名前缀修饰；

局部变量只能在函数中使用，实例属性是单个对象的属性，通过对象来访问，类属性属于整个类的，通过类来访问。

var f = function(name,age,country){
        this.name=name;
        this.age=age;
        f.country=country;
        this.introduce=function(){
            console.log(this.name);
            console.log(this.age);
            console.log(this.country);
        }
    };
    var per = new f("小名",20,"中国");
    per.introduce();
    console.log(f.country);

结果：

小明
    20
    undefined
    中国

可以看出，只有通过正确的方法才能正确访问到对应的属性。

**同一个类（函数）只占用一块内存，因此每个类属性都在同一块内存；同一个类每创建一个对象，系统将为该对象的实例属性分配一块内存。**

**js与java不同，他是一个动态语言，他允许随时为对象增加属性和方法，当直接为对象某个属性赋值时，即为对象增加属性。**

结果：

小明
    20
    china