原型与原型链

原型与原型链

一、原型

1.一切（引用类型）都是对象

（并不是所有的都是对象，值类型就不是对象）

1. typeof()函数
   • 函数输出的几种类型：undefined，number，string，boolean,function,object
2. instanceof()函数
   • 引用类型(函数，数组，对象，null，new Number(10)都是对象，都是引用类型)
   • 引用类型的类型判断用instanceof

2.函数与对象之间的关系

• 函数是一种对象；

• 对象都是通过函数创建的(有个例外）----语法糖

  var obj = { a: 10, b: 20 };
  var arr = [5, 'x', true];
  本质：
  var obj = new Object();
  obj.a = 10;
  obj.b = 20;
  
  var arr = new Array();
  arr[0] = 5;
  arr[1] = 'x';
  arr[2] = true;	
  

3.------prototype原型

• 函数是一种对象，它也是属性的集合，我们也可以对函数进行自定义属性

• 每个函数都有一个属性叫做prototype

• prototype的属性值是一个对象(属性的集合)，默认只有一个叫作constructor的属性，而constructor属性值指向的是这个函数本身

  ​ 右侧方框就是它的原型
  

• 原型既作为对象，属性的集合，还可以自定义的增加许多属性

  

• 也可以在自己自定义的方法的prototype中新增自己的属性

  //$('div')返回的是一个对象，对象——被函数创建的。假设创建这一对象的函数是 myjQuery。
  var $div = $('div');
  $div.attr('myName', '王福朋');
  
  myjQuery.prototype.attr = function () {
      //……
  };
  $('div') = new myjQuery();
  
  //Fn是一个函数，fn是从Fn函数new出来的，这样fn对象就可以调用Fn.prototype中的属性
  (每个对象都有一个隐藏的属性---“proto”，这个属性引用了创建这个对象函数的prototype,即 fn.proto === Fn.prototype)----------->"proto"成为"隐式原型"
  function Fn() { }
  Fn.prototype.name = '王福朋';
  Fn.prototype.getYear = function () {
      return 1988;
  };
  
  var fn = new Fn();
  console.log(fn.name);
  console.log(fn.getYear());
  

4.隐式原型

• 每个函数function都有一个prototype，即原型；每个对象都有一个proto，可成为隐式原型

• proto是一个隐藏的属性，有些低版本浏览器不支持这个属性值

  var obj={};
  console.log(obj.__proto__);
  

5.instanceof

• 表达式：A instanceof B

  如果B函数的显示原型对象在A对象的原型链上，返回true，否则返回false

• 值类型可以用typeof判断，string/number/boolean，，，typeof判断引用类型时，返回值只有object/function，不清楚是object还是数组或new Number,instanceof

  function Foo(){  }
  var f1 = new Foo();
  
  console.log(f1 instanceof Foo)//true
  console.log(f1 instanceof Object)//true
  

  

• instanceof的判断规则：沿着对象A的proto这条线来找，同时沿着函数B的prototype这条线来找，如果两条线能找到同一个引用，即为同一个对象，那么就返回true，若找到终点还未重合，则返回false

  console.log(Object instanceof Function);//true，如图
  console.log(Object instanceof Object);//true
    console.log(Function instanceof Function);//true
  console.log(Function instanceof Object);//true
  function Foo() {}
  console.log(Object instanceof  Foo);//false
  

面试测试题一：

 var A=function(){
         
        }
        A.prototype.n=1
        var b =new A()

        A.prototype={
            n:2,
            m:3
        }
        var c =new A()
        console.log(b.n,b.m,c.n,c.m);//1 undefined 2 3

面试测试题二：

var F =function(){

}
Object.prototype.a=function () {  
    console.log('a()');
}
Function.prototype.b=function () {  
    console.log('b()');
}
var f=new F()
f.a()//a()
// f.b()//报错
F.a()//a()
F.b()//b()

6.继承

• JavaScript中的继承是通过原型链来体现的

7.原型的灵活性

• 对象属性可以随时改动

jQuery = function(selector,context){
	return new jQuery.fn.init(selector,context);
},

jQuery.extend{
	expando:"jQuery"+(version +Math.random()).replace(/\D/g,""),
	isReady:true,
	
	error:function(msg){
		throw new Error(msg);
	},
	
	noop:function(){},
}

8.总之

• 原型

  1.函数的prototype属性

  • ​ 每个函数都有一个prototype属性，它默认指向Object空对象(即称为：原型对象)

  • ​ 原型对象中有一个属性constructor，它指向函数对象

  2.给原型对象添加属性(一般都是方法)

  • ​ 作用：函数的所有实例对象自动拥有原型中的属性(方法)

• 显式原型与隐式原型

1. 每个函数function都有一个prototype，即显式原型
2. 每个实例对象都有一个–proto–,即称为隐式原型
3. 对象的隐式原型的值为其对应构造函数的显式原型的值
4. 函数的prototype属性：在定义函数时自动添加的，默认值是一个空的object对象
5. 对象的–proto–属性：创建对象时自动添加到，默认值为构造函数的prototype属性值
6. 程序员能直接操作显示原型，但不能直接操作隐式原型(ES6之前)

• 原型链

  1. 原型链

     • 访问一个对象的属性时
       • 先在自身属性中查找，找到返回
       • 如果没有，再沿着——proto——这条链向上查找，找到返回
       • 如果最终没找到，返回undefined
     • 别名：隐式原型链
     • 作用：查找对象的属性(方法)

  2. 构造函数/原型/实体对象的关系

     var o1 = new Object();
     var o2 = {};
     

     

  3. 构造函数/原型/实体对象的关系2

function Foo(){  }

• 原型链属性问题

1. 读取对象的属性值时：会自动到原型链中查找
2. 设置对象的属性值时：不会查找原型链，如果当时对象中没有此属性值，直接添加此属性值并设置其值
3. 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上