关于js prototype 构造函数和普通函数

1.普通函数 :
（1） 调用 fun()
（2）调用函数，不会创建新对象
（3）函数内部this指向调用它的对象，没有指明调用对象，指向window
（4）普通函数大多以小写字母开头
（5）没有返回值

2.构造函数 :
（1） 调用 f = new fun()； 使用new操作符
（2）调用函数需要创建实例对象
（3）函数内部this指向创建的对象 f
（4）构造函数都应该以大写字母开头
（5）有默认的返回值，即新创建的实例对象
例如：

function fun(name,age){
     this.name =  name;
     this.age = age;
     this.dowhat = function want(){
         console.log(this.name+ "想吃好吃的");
     }
}
//普通函数调用 未指明对象 则this指向window
fun("小仙女",21);
window.want();//小仙女想吃好吃的

//构造函数调用  this指向实例对象res
let res = fun("小猪",22); //res是实例对象
res.want();//小猪想吃好吃的
eg：常见面试题：

 function foo() {
    var f2 = new foo2(); //使用构造函数调用foo2() ，f2中为foo2()的返回值
    console.log(f2); // {a: 3}
    console.log(this); //在foo中未指明调用对象，则this 指向 window
    return true;
  }
  function foo2() {
    console.log(this);// 在foo()中进行了实例化，this指向  foo2的实例对象
    return {a: 3};
  }
  var f1 = foo(); //使用普通函数调用foo()，f1存储返回值
  console.log(f1);// true
2.构造函数与原型法prototype的区别
构造函数
（1）浪费内存，每次同一个函数对象上生成一个实例，就可能出现重复的内容。
（2）效率低，因为重复内容也需要再次进行处理

原型法
（1）共有属性存在prototype中，减少了内容的重复使用，同一个对象的多个实例共享其prototype上的属性
（2）prototype中大多定义不变的属性，当prototype中属性发生改变，其实例对象上的属性也发生改变
（3）当所有对象使用同一个函数时，选择原型法更方便。

例如：同一个构造函数，创建两个实例有什么区别呢？
function Cat(name, color) {  
      this.name = name;  
      this.color = color;  
      this.type = "猫科动物";  
      this.eat = function () {  
          alert("吃老鼠");  
          console.log(this);
      };  
    }  
    
//生成实例：  
var cat1 = new Cat("大毛", "黄色");  
var cat2 = new Cat("二毛", "黑色");  
alert(cat1.type);    // 猫科动物  
cat1.eat(); // 吃老鼠   指向的是cat1 大毛
cat2.eat(); // 吃老鼠   指向的是cat2 二毛
alert(cat1.eat == cat2.eat); //false  

上述例子，构造函数Cat()创建了两个实例 cat1,cat2。
Cat函数上的属性和方法，却被重复使用了两遍，例如猫科动物，以及eat()方法，这些在两个实例上的使用结果都相同。
其次构造函数的最大特点是this指向，两个实例的创建，意味着this指向的改变，两个实例是相互独立的，有各自的作用域链，这也是两个对象为什么cat1.eat 不等于 cat2.eat。
看下两次调用的this分别是什么：

image.png
2.在来看下，同一个函数的prototype上的属性和方法在两个实例对象上有什么不一样呢？

//构造函数
function Cat(name, color) {  
        this.name = name;  
        this.color = color;  
}  
//原型属性和方法
Cat.prototype.type = "猫科动物";  
Cat.prototype.eat = function () {  
    alert("吃老鼠") ;
    console.log(this);
};  
  
//生成实例。  
var cat1 = new Cat("大毛", "黄色");  
var cat2 = new Cat("二毛", "黑色");  
alert(cat1.type); // 猫科动物  
cat1.eat();// 吃老鼠  
cat2.eat();//吃老鼠
alert(cat1.eat == cat2.eat); //ture

要理解prototype原型法就要理解原型对象，其中关系图中已经说明:

image.png
那么来看本题中的原型关系：

可见两个实例的原型都指向同一个原型对象，所以他们的type属性，eat()方法共享，所以cat1.eat 与 cat2.eat的值也相同。
_proto_都指向prototype对象，其实就是同一个内存地址，因此就提高了运行效率

作者：小本YuDL
链接：https://www.jianshu.com/p/e7662ae8a16f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。