Js函数与对象初步理解

以你之姓@ 2023-07-25 14:12 67阅读 0赞

前言：虽然是后端开发，但是总是会有前端的工作，在这里学习了一下JS的函数与对象做了一些了解，以便更好地学习Vue，因为对这块还不是很熟，所以基本从别的博客拼凑过来的加上自己的推断，写的有不准确的地方请多多包含。

参考：

[https://www.cnblogs.com/honkerzh/p/10270624.html][https_www.cnblogs.com_honkerzh_p_10270624.html]

[https://www.cnblogs.com/juggdxy/p/8245491.html][https_www.cnblogs.com_juggdxy_p_8245491.html]

[https://blog.csdn.net/qq\_42497250/article/details/92845285][https_blog.csdn.net_qq_42497250_article_details_92845285]

[https://blog.csdn.net/cc18868876837/article/details/81211729][https_blog.csdn.net_cc18868876837_article_details_81211729]

[https://blog.csdn.net/q610376681/article/details/102648808][https_blog.csdn.net_q610376681_article_details_102648808]

[https://blog.csdn.net/qtfying/article/details/105147755][https_blog.csdn.net_qtfying_article_details_105147755]

**目录**

第一章 JS函数

1.1 函数

1.2 私有变量与函数

1.3 prototype

1.3.1 来由

1.3.2 应用

1.3.3 测试

1.3.4 总结

1.4 构造函数

1.4 函数作用域

1.4.1 不同代码块之间没有变量提升

1.4.2 同一代码块种有变量提升

第二章 创建对象的方法

2.1 new 操作符 + Object 创建对象

2.2 字面式创建对象

2.3 工厂模式

2.4  构造函数模式

2.5 原型模式

2.6 混合模式

--------------------

# 第一章 JS函数 #

## 1.1 函数 ##

首先弄明白何为函数呢，函数简单的说就是重复执行的代码块。函数是这样的一段JavaScript 代码，它只定义一次，但可能被执行或调用任意次。

函数的定义方式：

1.声明式函数定义： function  函数名 （）\{\}；这种定义方式，会将函数声明提升到该函数所在作用域的最开头，也是就无论你在这个函数的最小作用域的那儿使用这种方式声明的函数，在这个作用域内，你都可以调用这个函数为你所用。

2.函数表达式：let fun = function()\{\}; 此方式定义的函数，只能在该作用域中，这段赋值代码执行之后才能通过fun（）调用函数，否则，由于变量声明提升，fun === undefined。

3.new Function 形式： var fun1 = new Function (arg1 , arg2 ,arg3 ,…, argN , body  )；Function构造函数所有的参数都是字符串类型。除了最后一个参数, 其余的参数都作为生成函数的参数即形参。这里可以没有参数。最后一个参数, 表示的是要创建函数的函数体。

总结：1 、第一种和第二种函数的定义的方式其实是第三种new Function 的语法糖，当我们定义函数时候都会通过 new Function 来创建一个函数，只是前两种为我们进行了封装，我们看不见了而已，js 中任意函数都是Function 的实例。

2、ECMAScript 定义的 函数实际上是功能完整的对象

## 1.2 私有变量与函数 ##

在函数内定义的变量和函数如果不对外提供接口，那么外部将无法访问到，也就是变为私有变量和私有函数。

function Obj(){
                    var a=0; //私有变量
                    var fn=function(){ //私有函数
    
                    }
                }

这样在函数对象Obj外部无法访问变量a和函数fn，它们就变成私有的，只能在Obj内部使用，即使是函数Obj的实例仍然无法访问这些变量和函数。

var o=new Obj();
                console.log(o.a); //undefined
                console.log(o.fn); //undefined

当定义一个函数后通过 “.”为其添加的属性和函数，通过对象本身仍然可以访问得到，但是其实例却访问不到，这样的变量和函数分别被称为静态变量和静态函数，用过Java、C\#的同学很好理解静态的含义。

function Obj(){
    
    }
    Obj.a=0; //静态变量
    Obj.fn=function(){ //静态函数 }
    
    console.log(Obj.a); //0
    console.log(typeof Obj.fn); //function
    
    var o=new Obj();
    console.log(o.a); //undefined
    console.log(typeof o.fn); //undefined

## 1.3 prototype ##

### 1.3.1 来由 ###

在面向对象编程中除了一些库函数我们还是希望在对象定义的时候同时定义一些属性和方法，实例化后可以访问，JavaScript也能做到这样

function Obj(){
                    this.a=[]; //实例变量
                    this.fn=function(){ //实例方法
    
                    }
                }
    
                console.log(typeof Obj.a); //undefined
                console.log(typeof Obj.fn); //undefined
    
                var o=new Obj();
                console.log(typeof o.a); //object
                console.log(typeof o.fn); //function

这样可以达到上述目的，然而

上面的代码运行结果完全符合预期，但同时也说明一个问题，在o1中修改了a和fn，而在o2中没有改变，由于数组和函数都是对象，是引用类型，  
这就说明o1中的属性和方法与o2中的属性与方法虽然同名但却不是一个引用，而是对Obj对象定义的属性和方法的一个复制。  
这个对属性来说没有什么问题，但是对于方法来说问题就很大了，因为方法都是在做完全一样的功能，但是却又两份复制，如果一个函数对象有上千和实例方法，  
那么它的每个实例都要保持一份上千个方法的复制，这显然是不科学的，这可肿么办呢，prototype应运而生。

### 1.3.2 应用 ###

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，默认情况下prototype属性会默认获得一个constructor(构造函数)属性，这个属性是一个指向prototype属性所在函数的指针。

function Person(){
    
                }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDk3MjUw_size_16_color_FFFFFF_t_70]

根据上图可以看出Person对象会自动获得prototyp属性，而prototype也是一个对象，会自动获得一个constructor属性，该属性正是指向Person对象。  
当调用构造函数创建一个实例的时候，实例内部将包含一个内部指针（很多浏览器这个指针名字为\_\_proto\_\_）指向构造函数的prototype，这个连接存在于实例和构造函数的prototype之间，而不是实例与构造函数之间 。

function Person(name){
                    this.name=name;
                }
    
                Person.prototype.printName=function(){
                    alert(this.name);
                }
    
                var person1=new Person('Byron');
                var person2=new Person('Frank');

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDk3MjUw_size_16_color_FFFFFF_t_70 1]

Person的实例person1中包含了name属性，同时自动生成一个\_\_proto\_\_属性，该属性指向Person的prototype，可以访问到prototype内定义的printName方法，大概就是这个样子的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDk3MjUw_size_16_color_FFFFFF_t_70 2]

### 1.3.3 测试 ###

写段程序测试一下看看prototype内属性、方法是能够共享

function Person(name){
                    this.name=name;
                }
    
                Person.prototype.share=[];
    
                Person.prototype.printName=function(){
                    alert(this.name);
                }
    
                var person1=new Person('Byron');
                var person2=new Person('Frank');
    
                person1.share.push(1);
                person2.share.push(2);
                console.log(person2.share); //[1,2]

果不其然！实际上当代码读取某个对象的某个属性的时候，都会执行一遍搜索，目标是具有给定名字的属性，搜索首先从对象实例开始，如果在实例中找到该属性则返回，  
如果没有则查找prototype，如果还是没有找到则继续递归prototype的prototype对象，直到找到为止，如果递归到object仍然没有则返回错误。  
同样道理如果在实例中定义如prototype同名的属性或函数，则会覆盖prototype的属性或函数。

function Person(name){
                    this.name=name;
                }
    
                Person.prototype.share=[];
                var person=new Person('Byron');
                person.share=0;
    
                console.log(person.share); //0而不是prototype中的[]

### 1.3.4 总结 ###

当然prototype不是专门为解决上面问题而定义的，但是却解决了上面问题。了解了这些知识就可以构建一个科学些的、复用率高的对象，如果希望实例对象的属性或函数则定义到prototype中，  
如果希望每个实例单独拥有的属性或方法则定义到this中，可以通过构造函数传递实例化参数。

function Person(name){
                    this.name=name;
                }
    
                Person.prototype.share=[];
    
                Person.prototype.printName=function(){
                    alert(this.name);
                }

## 1.4 构造函数 ##

定义：通过  new 函数名    来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要 功能为 初始化对象，特点是和new 一起使用。new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。**构造函数定义时首字母大写**（规范）。

对new理解：new 申请内存, 创建对象,当调用new时，后台会隐式执行new Object()创建对象。所以，通过new创建的字符串、数字是引用类型，而是非值类型。

var arr = \[\];     为      var arr = new Array();       的语法糖。

var obj = \{\}     为      var obj = new Object();     的语法糖

var  date = new Date();

## 1.4 函数作用域 ##

### 1.4.1 不同代码块之间没有变量提升 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		
    	</body>
     
    <script>
    	var c ="www.baidu.com"
    	out(c)
    </script>
    <script>
    	function out(url){
    		console.log(url)
    	}
    </script>
    </html>

结果:out未定义

### 1.4.2 同一代码块种有变量提升 ###

console.log(foo);  // foo() {console.log(123);}
      console.log(foo());//undefined  为啥是undefined下面我会说
      var foo = 456;
      function foo() {
        console.log(123);//123
      }
      console.log(foo); //undefined
      foo = 789;
      console.log(foo);//456
      console.log(foo());// 789

以上代码等同于：

var foo;                           // (0)   声明foo,并赋值为undefined
      foo = function() {                 // (1-1) 将一个函数赋值给foo
        console.log(123);                //（2-1） 执行函数，打印123
      }
      console.log(foo);                  //（1-2） foo此时为函数体的引用
      console.log(foo());                //（2-2）首先执行foo()函数，进入（2-1），执行完毕后，函数未有返回体即return，故打印undefined
      foo = 456;                         //（3）再次给foo重新复制一个基本数据类型的456
      console.log(foo);                  // (4)打印出456
      // 再次赋值
      foo = 789                          // (5)又再一次给foo重新复制一个基本数据类型的789
      console.log(foo);                  // (6)打印出789
      console.log(foo());                // (7)此时foo非函数体引用，故不能使用函数调用方法，故报错 foo is not a function

函数定义会跑到script块的最前面，所以最开始能打印出foo函数，但在不同scritp块中就不行了，个人有个很有意思的疑问，如果有两个函数，a函数用b函数的变量，b函数用a函数的变量，那么是不是变量提升也没用了，肯定会有一个是undefined，还是说JS引擎会先扫描整个JS代码，把所有全局变量都绑定到window对象上，包括函数和变量的定义。此时，window上就有了函数和值为undefined**，**这个后面尝试一下。

来个更高难度的：

console.log(person)
      console.log(fun)
      var person = '乐鸣'
      console.log(person)
    
      function fun () {
          console.log(person)
          var person = '秦时明月'
          console.log(person)
      }
      fun()
      console.log(person)

以上代码块等同于：

var fun;
      fun = function() {
        console.log(person)
        var person = '秦时明月'
        console.log(person)
      };
      console.log(person);   // undefined
      console.log(fun);     // 函数体function(){...}
      var person = '清风';
      console.log(person);  // 清风
      fun();               // 执行fun函数   // undefined // 秦时明月
      console.log(person); // 清风

为啥类似于如下这样一个函数，打印出来会是undefined呢？

var person = '清风明月';
      function fun(){
        console.log(person);
        var person = '秦时明月';
        console.log(person);
      }

因为：

代码在执行时，首先会检查person是否为函数私有变量，如果是，则停止查找全局变量中的person，并且该函数中的person仅仅在函数体中生效，所以当检测到person为fun的私有变量是，如果前置，则直接返回undefined也就理所当然了

# 第二章 创建对象的方法 #

## 2.1 new 操作符 + Object 创建对象 ##

var person = new Object();
        person.name = "lisi";
        person.age = 21;
        person.family = ["lida","lier","wangwu"];
        person.say = function(){
            alert(this.name);
        }

## 2.2 字面式创建对象 ##

var person ={
            name: "lisi",
            age: 21,
            family: ["lida","lier","wangwu"],
            say: function(){
                alert(this.name);
            }
        };

以上两种方法在使用同一接口创建多个对象时，会产生大量重复代码，为了解决此问题，工厂模式被开发。

## 2.3 工厂模式 ##

function createPerson(name,age,family) {
        var o = new Object();
        o.name = name;
        o.age = age;
        o.family = family;
        o.say = function(){
            alert(this.name);
        }
        return o;
    }
    
    var person1 =  createPerson("lisi",21,["lida","lier","wangwu"]);   //instanceof无法判断它是谁的实例，只能判断他是对象，构造函数都可以判断出
    var person2 =  createPerson("wangwu",18,["lida","lier","lisi"]);
    console.log(person1 instanceof Object);                           //true

工厂模式解决了重复实例化多个对象的问题，但没有解决对象识别的问题（但是工厂模式却无从识别对象的类型，因为全部都是Object，不像Date、Array等，本例中，得到的都是o对象，对象的类型都是Object，因此出现了构造函数模式）

## 2.4  构造函数模式 ##

function Person(name,age,family) {
        this.name = name;
        this.age = age;
        this.family = family;
        this.say = function(){
            alert(this.name);
        }
    }
    var person1 = new Person("lisi",21,["lida","lier","wangwu"]);
    var person2 = new Person("lisi",21,["lida","lier","lisi"]);
    console.log(person1 instanceof Object); //true
    console.log(person1 instanceof Person); //true
    console.log(person2 instanceof Object); //true
    console.log(person2 instanceof Person); //true
    console.log(person1.constructor);      //constructor 属性返回对创建此对象的数组、函数的引用

对比工厂模式有以下不同之处：

1、没有显式地创建对象

2、直接将属性和方法赋给了 this 对象

3、没有 return 语句

以此方法调用构造函数步骤 \{

1、创建一个新对象

2、将构造函数的作用域赋给新对象（将this指向这个新对象）

3、执行构造函数代码（为这个新对象添加属性）

4、返回新对象 ( 指针赋给变量person ？？？ )

可以看出，构造函数知道自己从哪里来（通过 instanceof 可以看出其既是Object的实例，又是Person的实例）

构造函数也有其缺陷，每个实例都包含不同的Function实例（ 构造函数内的方法在做同一件事，但是实例化后却产生了不同的对象，方法是函数 ，函数也是对象）详情见构造函数详解

因此产生了原型模式

## 2.5 **原型模式** ##

原型模式的好处是所有对象实例共享它的属性和方法（即所谓的共有属性），此外还可以如代码第16,17行那样设置实例自己的属性（方法）（即所谓的私有属性），可以覆盖原型对象上的同名属性（方法），但我想缺点也是显而易见的（个人推测），prototype的使用使所有对象的属性值是一样的，一个对象的属性修改，其它同类对象的属性都要修改。具体参见原型模式详解

## 2.6 混合模式 ##

可以看出，混合模式共享着对相同方法的引用，又保证了每个实例有自己的私有属性，最大限度的节省了内存。

[https_www.cnblogs.com_honkerzh_p_10270624.html]: https://www.cnblogs.com/honkerzh/p/10270624.html
[https_www.cnblogs.com_juggdxy_p_8245491.html]: https://www.cnblogs.com/juggdxy/p/8245491.html
[https_blog.csdn.net_qq_42497250_article_details_92845285]: https://blog.csdn.net/qq_42497250/article/details/92845285
[https_blog.csdn.net_cc18868876837_article_details_81211729]: https://blog.csdn.net/cc18868876837/article/details/81211729
[https_blog.csdn.net_q610376681_article_details_102648808]: https://blog.csdn.net/q610376681/article/details/102648808
[https_blog.csdn.net_qtfying_article_details_105147755]: https://blog.csdn.net/qtfying/article/details/105147755
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDk3MjUw_size_16_color_FFFFFF_t_70]: /images/20230528/75a8980c159f428c99e3af9b14744ad4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDk3MjUw_size_16_color_FFFFFF_t_70 1]: /images/20230528/96177375f2344893baff8d2830e8c412.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDk3MjUw_size_16_color_FFFFFF_t_70 2]: /images/20230528/1304c86a53874d8a999544f8fa238caf.png