《浏览器兼容》1. vue 项目中为 Object 对象添加原型方法

浏览器兼容

疑问：在低版本浏览器中，如何实现 Object 属性方法的添加；

第一章 Vue 项目中为 Object 添加 values()、keys() 原型方法

前言

本章用于实现，在低版本浏览器中，如何实现新版浏览器的 Object.values()、Object.keys() 方法。

一、prototpye.js

1. coding

// Object setPrototypeOf extends;
;!(function () {
	
	Object.prototype.values = Object.prototype.values || function(obj){
		var l =[];
		for(var k in obj){
			l.push(obj[k])
		};
		return l;
	};

	Object.prototype.keys = Object.prototype.keys || function(obj){
		var l =[];
		for(var k in obj){
			l.push(k)
		};
		return l;
	};
	// 防止 vue-router 中使用 asign 对 Object.prototype 操作时，导致导航栏错误;
	Object.defineProperty(Object.prototype, 'values', { "enumerable": false });
	Object.defineProperty(Object.prototype, 'keys', { "enumerable": false });
})();

二、使用步骤

1. 引入 prototype.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>为 Object.prototype 添加属性 Demo </title>
  
  <script src="./prototype.js"></script>
</head>

<body>
<script>
	// 建议在 chrome50 版本下测试，最新浏览器版本已兼容;
  	console.log(Object.values);
</script>
</body>
</html>

End

纸上得来终觉浅，绝知此事要躬行。

0 条评论