原型与原型链

最新推荐文章于 2021-11-30 10:54:36 发布

qvwvq

最新推荐文章于 2021-11-30 10:54:36 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

分类专栏：尚硅谷学习笔记

本文链接：https://blog.youkuaiyun.com/qvwvq/article/details/115534420

尚硅谷学习笔记专栏收录该内容

11 篇文章

订阅专栏

原型与原型链

一、原型

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

面试测试题二：

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之前)

原型链
1. 原型链
  - 访问一个对象的属性时
    - 先在自身属性中查找，找到返回
    - 如果没有，再沿着——proto——这条链向上查找，找到返回
    - 如果最终没找到，返回undefined
  - 别名：隐式原型链
  - 作用：查找对象的属性(方法)
2. 构造函数/原型/实体对象的关系
```
var o1 = new Object();
var o2 = {};
```
3. 构造函数/原型/实体对象的关系2