为何canvas 2D上下文含font属性，hasOwnProperty却返回false？

这个问题其实是JavaScript原型链机制在DOM API上的典型体现，咱们来理清楚背后的逻辑：

首先得明确hasOwnProperty()这个方法的核心作用：它只检查当前对象自身直接拥有的属性，不会去遍历它的原型链。

而你拿到的ctx（也就是CanvasRenderingContext2D的实例），它的font属性并不是直接挂载在这个实例对象本身上的，而是定义在它的原型对象上的。咱们可以用代码验证这一点：

var ctx = document.createElement('canvas').getContext('2d');
// 检查原型上是否有font属性
console.log(Object.getPrototypeOf(ctx).hasOwnProperty('font')); // 会返回true

那为什么你直接console.log(ctx.font)能正常输出值呢？因为JavaScript在访问对象属性时，会遵循原型链查找规则：如果当前对象自身没有这个属性，就会去它的原型对象上找，原型对象没有的话再往上找，直到找到目标属性或者到达原型链顶端的null。

这种设计在DOM API里很常见——把通用的属性、方法放在原型上，让所有实例共享，既节省内存，也方便统一维护这些特性。所以你看到的截图里显示font存在，其实是浏览器的控制台把原型链上的属性也一并展示出来了，并不是说这个属性属于实例自身。

内容的提问来源于stack exchange，提问作者梁家辉