2020-3-18 前端达人
前言
在学习JS中的原型,原型链,继承这些知识之前,我们先学习下基础知识:函数和对象的关系。
我们一直都知道,函数也是对象的一种,因为通过instanceof就可以判断出来。但是函数和对象的关系并不是简单的包含和被包含的关系,这两者之间的关系还是有点复杂的。接下来我们就来捋一捋。
首先,阐述一点,对象都是通过函数创建的
对于下面这种类型的代码,一般叫做“语法糖”
var obj = {a:10,b:20}; var arr = [5, 'x', true];
但是,其实上面这段代码的实质是下面这样的:
//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;
function Fn() { } Fn.prototype.name = '张三'; Fn.prototype.getAge = function () { return 12; }; var fn = new Fn(); console.log(fn.name); console.log(fn.getAge ());
即,Fn是一个函数,fn对象是从Fn函数new出来的,这样fn对象就可以调用Fn.prototype中的属性。
但是,因为每个对象都有一个隐藏的属性——“proto”,这个属性引用了创建这个对象的函数的prototype。即:fn.proto === Fn.prototype
那么,这里的_proto_到底是什么呢?
其实,这个__proto__是一个隐藏的属性,javascript不希望开发者用到这个属性值,有的低版本浏览器甚至不支持这个属性值。
var obj = {}; console.log(obj.__proto__);
isPrototypeOf()函数,用于检测两个对象之间似乎否存在原型关系,使用方法如下:
// 查看 Fn 的 prototype 对象,是否是 f 原型 Fn.prototype.isPrototypeOf(f);
//// 查看 f 对象是否是构造函数 Fn 的实例 //console.log(f instanceof Fn); //// 查看 f 对象是否是构造函数 Fn 的实例 //console.log(f instanceof Object); function Fn(){} function Fun(){} var f = new Fn(); console.log( f.__proto__ === Fn.prototype ); // t console.log( Fn.prototype.isPrototypeOf(f) ); // t console.log( Fun.prototype.isPrototypeOf(f) ); // f console.log( Object.prototype.isPrototypeOf(f) ); // t console.log( f instanceof Fn ); // t console.log( f instanceof Fun ); // f console.log( f instanceof Object ); // t //两种使用,如果是返回ture,如果不是返回false; //注意:instanceof运算符右侧为构造函数,并且js中所有原型都来自Object构造函数。
JS解析器访问属性顺序
当访问实例 f 的属性或方法时,会先在当前实例对象 f 中查找,如果没有,则沿着__proto__继续向上寻找,如果找到最顶头的Object还是找不到,则会抛出undefined。如果在实例中找到,或某层原型中找到,就会读取并使用,同时停止向上找寻。
由此可见,解析器的解析顺序遵循就近原则,如果在最近的位置发现属性存在,便不会继续向上找寻。
原型的应用
数组去重:
Array.prototype.noRepeat = function(){ var m = []; for(var i=0;i<this.length;i++){ if(m.indexOf(this[i]) == -1){ m.push(this[i]); } } return m; } var arr = [3,4,5,6,7,6,5,4,3,2,1]; var res = arr.noRepeat(); console.log(res); var arr1 = ["a","b","c","b","a"]; var res1 = arr1.noRepeat(); console.log(res1);
function Parent(){ } Parent.prototype.show = function(){ console.log("哈哈哈"); } function Child(){ } for(var i in Parent.prototype){ Child.prototype[i] = Parent.prototype[i]; } Child.prototype.show = function(){ console.log("hello"); } var p = new Parent(); p.show(); console.log(p.name); var c = new Child(); c.show(); console.log(c.name);