原型与原型链
一、原型
1.一切(引用类型)都是对象
(并不是所有的都是对象,值类型就不是对象)
- typeof()函数
- 函数输出的几种类型:undefined,number,string,boolean,function,object
- 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
![43631716178916212](https://i-blog.csdnimg.cn/blog_migrate/c22d1193757ca99c7d10e109c1eb8748.png)
面试测试题二:
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.给原型对象添加属性(一般都是方法)
- 作用:函数的所有实例对象自动拥有原型中的属性(方法)
-
-
显式原型与隐式原型
- 每个函数function都有一个prototype,即显式原型
- 每个实例对象都有一个–proto–,即称为隐式原型
- 对象的隐式原型的值为其对应构造函数的显式原型的值
- 函数的prototype属性:在定义函数时自动添加的,默认值是一个空的object对象
- 对象的–proto–属性:创建对象时自动添加到,默认值为构造函数的prototype属性值
- 程序员能直接操作显示原型,但不能直接操作隐式原型(ES6之前)
-
原型链
-
原型链
- 访问一个对象的属性时
- 先在自身属性中查找,找到返回
- 如果没有,再沿着——proto——这条链向上查找,找到返回
- 如果最终没找到,返回undefined
- 别名:隐式原型链
- 作用:查找对象的属性(方法)
- 访问一个对象的属性时
-
构造函数/原型/实体对象的关系
var o1 = new Object(); var o2 = {};
-
构造函数/原型/实体对象的关系2
-
function Foo(){ }
- 原型链属性问题
- 读取对象的属性值时:会自动到原型链中查找
- 设置对象的属性值时:不会查找原型链,如果当时对象中没有此属性值,直接添加此属性值并设置其值
- 方法一般定义在原型中,属性一般通过构造函数定义在对象本身上