网站首页 > 技术文章 正文
- 函数的 prototype 属性 每个函数都有一个 prototype 属性,它默认指向一个 Object 空对象(原型对象)原型对象中有一个属性 constructor,它指向函数对象
- 给原型对象添加属性 作用:函数的所有实例对象自动拥有原型中的属性(方法)
console.log(Date.prototype.constructor === Date) // 原型对象中有一个属性 `constructor`,它指向函数对象
显示原型与隐式原型
- 每个函数function都有一个prototype,即显示原型
- 每个实例对象都一个__proto__,即隐式原型
- 对象的隐式原型的值为其对应构造函数的显示原型的值
- 总结 函数的prototype属性:在定义函数时自动添加,默认值为一个空对象对象的__proto__的属性: 创建对象的时候自动添加,默认值为构造函数的prototype属性值能直接操作显示原型,不可直接操作隐式原型(ES6 之前)
// 定义构造函数
function Fn() {} // 内部语句:this.prototype = {}
// 1. 每个函数function都有一个prototype,即显示原型属性,默认指向一个空`Object`对象
console.log(Fn.prototype)
// 2. 每个实例对象都一个__proto__,即隐式原型
// 创建实例对象
var fn = new Fn() // 内部语句:this.__proto__ = Fn.prototype
console.log(fn.__proto__)
// 3. 对象的隐式原型的值为其对应构造函数的显示原型的值
console.log(Fn.prototype === fn.__proto__) // true
// 给原型添加方法
Fn.prototype.test = function() {}
// 通过实例对象调用原型方法
fn.test()
原型链
- 原型链 访问一个对象的属性时 先在自身属性中查找,找到返回如果没有,再沿着__proto__这条链向上查找,找到返回如果最终没有找到,返回undefined 别名:隐式原型链作用:查找对象的属性(方法)
- 构造函数/原型/实体对象的关系
- 函数的显示原型指向的对象:默认一个空的Object实例对象(但Object不满足) console.log(Fn.prototype instanceof Object) // true
console.log(Object.prototype instanceof Object) // false
console.log(Function.prototype instanceof Object) // true - 所有函数都是Function的实例(包含 Function) console.log(Function.__proto__ === Function.prototype) // true
- Object的原型对象是原型链的尽头 console.log(Object.prototype.__proto__) // null
原型链属性
- 读取对象的属性值时:会自动到原型链中查找
- 设置对象的属性值时:不会查找原型链,如果当前对象中没有此属性,直接添加此属性并设置其值
- 方法一般定义在原型中,属性一般通过构造函数定义在对象本身上 function Fn() {}
Fn.prototype.a = 'mondo'
var fn1 = new Fn()
console.log(fn1.a, fn1) // mondo
var fn2 = new Fn()
fn2.a = 'imondo'
console.log(fn1.a, fn2.a, fn2) // mondo imondo
function A() {}
A.prototype.n = 1
var b = new A()
A.prototype = {
n: 1,
m: 2
}
var c = new A()
console.log(b.n, b.m, c.n, c.m) // 1, undefined, 1, 2
instanceof 判断
- instanceof 是如何判断 表达式:A instanceof B如果 B 函数的显示原型对象在 A 对象的原型链上, 返回 true,否则返回 false
- Function 是通过 new 自己产生的实例 function Foo() {}
var f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true
console.log(Object instanceof Function) // true
console.log(Object instanceof Object) // true
console.log(Function instanceof Function) // true
console.log(Function instanceof Object) // true
console.log(Object instanceof Foo) // false
- END -
猜你喜欢
- 2024-11-10 这样理解 JS 原型链,通透 js原型链的理解
- 2024-11-10 JavaScript-原型链 javascript 原型,原型链 ? 有什么特点?
- 2024-11-10 javascript原型链 js原型链的用处
- 2024-11-10 js 原型/原型链/构造函数/实例/继承
- 2024-11-10 【JavaScript 高级】深入了解原型链
- 2024-11-10 快速读懂JavaScript中的原型链 js的原型和原型链是什么
- 2024-11-10 你可能不太理解的JavaScript - 原型与原型链
- 2024-11-10 我在jacascript中学习到的那些原型链,你知道吗?
- 2024-11-10 JavaScript中的原型prototype和__proto__的区别及原型链概念
- 2024-11-10 面试问题分享 - 5:解释一下 原型、构造函、实例、原型链 之间的关系
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-