灏天阁

Proxy 对象、Intl对象、navigator对象实例

· Yin灏

Proxy 对象

Proxy 对象主要用来改造特定对象实例的访问机制，成为新的访问代理机制，以便不存在的属性，被访问到时，或者超出范围的数据，被赋予特定属性时；被改造之后的访问机制，可返回动态产生的数据。

function get_value(obj, attr) {
  let chioce;
  chioce = attr in obj ? obj[attr]: 'N/A';
  return chioce;
}

function set_value(obj, attr, value) {
  let new_value;
  switch(attr) {
    case 'age':
      if(value > 150) {
        new_value = 'Impossibly old...';
      }
    break;
    case 'gender':
      if(!(value in ['male', 'female'])) {
        new_value = 'Impossibly gender...';
      }
    break;
    default:
      new_value = value;
  }
  obj[attr] = new_value;
}

var cur_obj = {
  name: 'Daisy',
  gender: 'female',
  age: 30
};

var proxy_handle = {
  get: get_value,
  set: set_value
}

var p01 = new Proxy(cur_obj, proxy_handle);

p01.department = 'finance';
p01.position = 'manager';

console.log(p01); // Proxy {name: "Daisy", gender: "female", age: 30, department: "finance", position: "manager"}
console.log(p01.name); // 'Daisy'
console.log(p01.position); // 'manager'
console.log(p01.company); // 'N/A'
console.log(p01.salary); // 'N/A'

console.log('\n\n');

var p02 = new Proxy(cur_obj, proxy_handle);
p02.age = 152; // 超出了 150 的范围
p02.gender = 'unknown'; // 也不是在 male 和 female 两者之一

console.log(p02); // Proxy {name: "Daisy", gender: "Impossibly gender...", age: "Impossibly old...", department: "finance", position: "manager"}

console.log(p02.age); // Impossibly old...
console.log(p02.gender); // Impossibly gender...

创建访问代理机制的构造函数

欲创建特定对象实例的访问代理机制，需要通过 Proxy 对象的构造函数来完成。

var p01 = new Proxy(cur_obj, proxy_handle);

确定被代理的特定对象

运用 Proxy 对象的构造函数之前，必须确定欲被代理的特定对象实例。

var cur_obj = {
  name: 'Daisy',
  gender: 'female',
  age: 30
};

自定义代理函数

运用 Proxy 对象构造函数之前，必须先定义达成访问代理机制的代理函数。

function get_value(obj, attr) {
  let chioce;
  chioce = attr in obj ? obj[attr]: 'N/A';
  return chioce;
}

function set_value(obj, attr, value) {
  let new_value;
  switch(attr) {
    case 'age':
      if(value > 150) {
        new_value = 'Impossibly old...';
      }
    break;
    case 'gender':
      if(!(value in ['male', 'female'])) {
        new_value = 'Impossibly gender...';
      }
    break;
    default:
      new_value = value;
  }
  obj[attr] = new_value;
}

window.navigator 对象实例

获取浏览器相关信息。

// 浏览器支持 cookie 机制，当前处于开启状态
console.log(navigator.cookieEnabled); // true
// 浏览器当前处于在线状态
console.log(navigator.onLine); // true
// 浏览器支持的 Java applet 处理机制，当前处于开启状态
console.log(navigator.javaEnabled()); // false

console.log('\n');
// 浏览器的代码名称
console.log(navigator.appCodeName); // 'Mozilla'
// 浏览器的应用名称
console.log(navigator.appName); // 'Netscape'

console.log('\n');
// 浏览器的应用版本
console.log(navigator.appVersion); // '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.40 Safari/537.36'
// 浏览器的用户代理
console.log(navigator.userAgent); // 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.40 Safari/537.36'

console.log('\n');
// 浏览器所在操作平台的版本
console.log(navigator.platform); // Win32
// 浏览器引擎的产品名称
console.log(navigator.product); // Gecko

// 浏览器的语言
console.log(navigator.language); // 'zh-CN'

获取当前地址位置相关信息

let options = {
  maximumAge: 0,
  timeout: 7000,
  enableHighAccuracy: true
}

function succeed(position) {
  with(position.coords) {
    let message = `Current location:\n\tLatitude = ${latitude}\n\tLongitude = ${longitude}\n\tdistance accuracy = ${accuracy}meters`;
    console.log(message);
  }
}

function fail(error) {
  console.warn(`${error.code}: ${error.message}`);
}

navigator.geolocation.getCurrentPosition(succeed, fail, options);

/*
Current location:
	Latitude = 30.618494899999995
	Longitude = 104.0653001
	distance accuracy = 7595meters
*/

- Book Lists -