JS 的原型、原型链始终是比拟难了解的内容,不少初学者甚至有肯定教训的老鸟都不肯定能齐全说分明,更多的 ” 很可能 ” 是只知其一; 不知其二,而这部分内容又是 JS 的核心内容,想要技术进阶的话必定不能对这个概念只知其一; 不知其二,碰到问题靠“猜”,却不了解它的规定!
prototype
只有函数有 prototype 属性
let a = {}
let b = function () {}
console.log(a.prototype) // undefined
console.log(b.prototype) // {constructor: function(){...} }
Object.prototype 怎么解释?
其实 Object
是一个全局对象,也是一个构造函数,以及其余根本类型的全局对象也都是构造函数:
function outTypeName(data, type) {let typeName = Object.prototype.toString.call(data)
console.log(typeName)
}
outTypeName(Object) //[object Function]
outTypeName(String) // [object Function]
outTypeName(Number) // [object Function]
为什么只有函数有 prototype 属性
JS 通过 new
来生成对象,然而仅靠构造函数,每次生成的对象都不一样。
有时候须要在两个对象之间共享属性,因为 JS 在设计之初没有类的概念,所以 JS 应用函数的 prototype
来解决这部分 须要被共享的属性 ,通过函数的prototype
来模仿类:
当创立一个函数时,JS 会主动为函数增加 prototype
属性,值是一个有 constructor
的对象。
以下是共享属性 prototype
的栗子:
function People(name) {this.name = name}
People.prototype.age = 23 // 岁数
// 创立两个实例
let People1 = new People('OBKoro1')
let People2 = new People('扣肉')
People.prototype.age = 24 // 长大了一岁
console.log(People1.age, People2.age) // 24 24
为什么 People1
和People2
能够拜访到People.prototype.age
?
起因是:People1
和 People2
的原型是People.prototype
,答案在下方的:构造函数是什么以及它做了什么。
原型链
__proto__
和Object.getPrototypeOf(target)
:对象的原型
__proto__
是对象实例和它的构造函数之间建设的链接,它的值是:构造函数的 `prototype。
也就是说:__proto__
的值是它所对应的原型对象,是某个函数的prototype
Object.getPrototypeOf(target)
全等于__proto__
。
它是 ES6 的规范,兼容 IE9,支流浏览器也都反对,MDN,本文将以 Object.getPrototypeOf(target)
指代__proto__
。
不要再应用__proto__
:
本段摘自阮一峰 -ES6 入门,具体解析请点击链接查看
__proto__
属性没有写入 ES6 的注释,而是写入了附录。- 起因是它实质上是一个外部属性,而 不是一个正式的对外的 API,只是因为浏览器广泛支持,才被退出了 ES6。
- 规范明确规定,只有浏览器必须部署这个属性,其余运行环境不肯定须要部署,而且新的代码最好认为这个属性是不存在的。
- 所以无论从语义的角度,还是从兼容性的角度,都不要应用这个属性,应该应用:
Object.getPrototypeOf(target)
(读操作)、Object.setPrototypeOf(target)
(写操作)、Object.create(target)
(生成操作)代替
构造函数是什么、它做了什么
出自《你不晓得的 js》:在 js 中, 实际上并不存在所谓的 ’ 构造函数 ’,只有对于函数的 ’ 结构调用 ’。
上文始终提到构造函数,所谓的构造函数,实际上就是通过关键字 new
来调用的函数:
let newObj = new someFn() // 结构调用函数
结构 /new 调用函数的时候做了什么:
- 创立一个全新的对象。
- 这个新对象的原型 (
Object.getPrototypeOf(target)
) 指向构造函数的prototype
对象。 - 该函数的 this 会绑定在新创建的对象上。
- 如果函数没有返回其余对象,那么 new 表达式中的函数调用会主动返回这个新对象。
- 咱们称这个新对象为构造函数的实例。
原型继承就是利用结构调用函数的个性:
SubType.prototype = new SuperType(); // 原型继承:SubType 继承 SuperType
SubType.prototype.constructor = SubType // 从新指定 constructor 指向 不便找到构造函数
// 挂载 SuperType 的 this 和 prototype 的属性和办法到 SubType.prototype 上
- 结构调用的第二点:将新对象的
Object.getPrototypeOf(target)
指向函数的prototype
- 结构调用的第三点:该函数的 this 会绑定在新创建的对象上。(所以父类
this
申明的属性被所有子类实例共享) - 新对象赋值给
SubType.prototype
原型链是什么
来看个例子:
function foo() {}
const newObj = new foo() // 结构调用 foo 返回一个新对象
const newObj__proto__ = Object.getPrototypeOf(newObj) // 获取 newObj 的原型对象
newObj__proto__ === foo.prototype // true 验证 newObj 的原型指向 foo
const foo__proto__ = Object.getPrototypeOf(foo.prototype) // 获取 foo.prototype 的原型
foo__proto__ === Object.prototype // true foo.prototype 的原型是 Object.prototype
如果用以前的语法,从 newObj
查找 foo
的原型,是这样的:
newObj.__proto__.__proto__ // 这种关系就是原型链
能够用以下三句话来了解原型链:
- 每个对象都领有一个原型对象 :
newObj
的原型是foo.prototype
。 - 对象的原型可能也是继承其余原型对象的 :
foo.prototype
也有它的原型Object.prototype
。 - 一层一层的,以此类推,这种关系就是原型链。
一个对象是否在另一个对象的原型链上
如果一个对象存在另一个对象的原型链上,咱们能够说:它们是继承关系。
判断形式有两种,但都是依据构造函数的 prototype
是否在原型链上来判断的:
instanceof
: 用于测试构造函数的 prototype 属性是否呈现在对象的原型链中的任何地位
语法:object instanceof constructor
let test = function () {}
let testObject = new test();
testObject instanceof test // true test.prototype 在 testObject 的原型链上
testObject instanceof Function // false Function.prototype 不在 testObject 的原型链上
testObject instanceof Object // true Object.prototype 在 testObject 的原型链上
isPrototypeOf
:测试一个对象是否存在于另一个对象的原型链上
语法:prototypeObj.isPrototypeOf(object)
let test = function () {}
let testObject = new test();
test.prototype.isPrototypeOf(testObject) // true test.prototype 在 testObject 的原型链上
Object.prototype.isPrototypeOf(testObject) // true Object.prototype 在 testObject 的原型链上
原型链的起点: Object.prototype
Object.prototype
是原型链的起点,所有对象都是从它继承了办法和属性。
Object.prototype
没有原型对象:
const proto = Object.getPrototypeOf(Object.prototype) // null
上面是两个验证例子,有疑虑的同学多写几个测试用例印证一下。
字符串原型链的起点:Object.prototype
参考 前端进阶面试题具体解答
let test = '由 String 函数结构进去的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是 String 对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String 对象的原型是 Object 对象
函数原型链的起点:Object.prototype
let test = function () {}
let fnPrototype = Object.getPrototypeOf(test)
fnPrototype === Function.prototype // true test 的原型是 Function.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true
原型链用来做什么?
属性查找:
如果试图拜访对象 (实例 instance) 的某个属性, 会首先在对象外部寻找该属性, 直至找不到, 而后才在该对象的原型 (instance.prototype) 里去找这个属性,以此类推
咱们用一个例子来形象阐明一下:
let test = '由 String 函数结构进去的'
let stringPrototype = Object.getPrototypeOf(test) // 字符串的原型
stringPrototype === String.prototype // true 字符串的原型是 String 对象
Object.getPrototypeOf(stringPrototype) === Object.prototype // true String 对象的原型是 Object 对象
当你拜访 test
的某个属性时,浏览器会进行以下查找:
- 浏览器首先查找
test
自身 - 接着查找它的原型对象:
String.prototype
- 最初查找
String.prototype
的原型对象:Object.prototype
- 一旦在原型链上找到该属性,就会立刻返回该属性,进行查找。
- 原型链上的原型都没有找到的话,返回
undefiend
这种查找机制还解释了字符串为何会有自带的办法: slice
/split
/indexOf
等。
精确的说:
- 这些属性和办法是定义在
String
这个全局对象 / 函数上的。 - 字符串的原型指向了
String
函数的prototype
。 - 之后通过查找原型链,在 String 函数的
prototype
中找到这些属性和办法。
回绝查找原型链:
hasOwnProperty
: 批示对象本身属性中是否具备指定的属性
语法:obj.hasOwnProperty(prop)
参数: prop
要查找的属性
返回值: 用来判断某个对象是否含有指定的属性的Boolean
。
let test ={'OBKoro1': '扣肉'}
test.hasOwnProperty('OBKoro1'); // true
test.hasOwnProperty('toString'); // false test 自身没查找到 toString
这个 API
是挂载在 object.prototype
上,所有对象都能够应用,API 会疏忽掉那些从原型链上继承到的属性。
扩大:
实例的属性
你晓得构造函数的实例对象上有哪些属性吗?这些属性别离挂载在哪个中央?起因是什么?
function foo() {
this.some = '222'
let ccc = 'ccc'
foo.obkoro1 = 'obkoro1'
foo.prototype.a = 'aaa'
}
foo.koro = '扣肉'
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1` 上有哪些属性, 这些属性别离挂载在哪个中央
foo.prototype.test = 'test2' // 从新赋值
下面这道是考查 JS
根底的题,很多人都没说对,起因是没有彻底把握 this
、 原型链
、 函数
。
想一下再看解析:
想一下再看解析:
想一下再看解析:
想一下再看解析:
想一下再看解析:
this.some
:foo1
对象的属性
通过结构调用 foo
的this
指向 foo1
,所以this.some
挂载在 foo1
对象下。
属性查找: foo1.some
foo1.some
间接读取 foo1
的属性。
foo1.test
、foo1.a
:foo1
对象的原型
依据上文提到的:结构 /new 调用函数的时候会创立一个新对象 (foo1
),主动将foo1
的原型 (Object.getPrototypeOf(foo1)
) 指向构造函数的 prototype 对象。
结构调用会执行函数,所以 foo.prototype.a = 'aaaaa'
也会执行,单就赋值这个层面来说写在 foo
里面和写在 foo
外面是一样的。
属性查找:foo1.test
、foo1.a
foo1
自身没有找到, 持续查找foo1
的原型Object.getPrototypeOf(foo1)
上找到了a
和test
,返回它们,进行查找。foo1.obkoro1
和foo1.koro
:返回 undefined
动态属性: foo.obkoro1
、foo.koro
函数在 JS 中是一等公民,它也是一个对象, 用来模仿类。
这两个属性跟 foo1
没有关系,它是对象 foo
上的两个属性 (相似函数的:arguments
/prototype
/length
等属性),称为 动态属性。
它们只能通过 foo.obkoro1
和foo.koro
来拜访。
原型对象扭转,原型链上游获取的值也会扭转
下面那个例子中的 foo1.test
的值是什么?
foo.prototype.test = 'test'
let foo1 = new foo() // `foo1` 上有哪些属性, 这些属性别离挂载在哪个中央
foo.prototype.test = 'test2' // 从新赋值
foo1.test
的值是 test2
,起因是:foo1
的原型对象是 Object.getPrototypeOf(foo1)
存的指针,指向 foo.prototype
的内存地址,不是拷贝,每次读取的值都是以后 foo.prototype
的最新值。
打印foo1
:
小结
写了好几天,之前网上很多图文博客,那些线指来指去,就我集体看来还是比拟难以了解的,所以本文纯文字的模式来形容这些概念,置信认真看完的同学必定都有所播种,如果没看懂的话,倡议多看几遍,这部分概念真的很重要!