來源博客：【Harryの心閣】

第十九天

(題目來源: 前端每日知識3+1)

Javascript題目

• 正則規則的熟悉、prototype和__proto__屬性的區別和聯系、手撕new 建構式

問題解答

/*
  地區： ([1-6][1-9]|50)\d{4}  // 補充重慶地區50
  年的前兩位： (18|19|20)            1800-2399
  年的后兩位： \d{2}
  月份：((0[1-9])|10|11|12)
  天數： (([0-2][1-9])|10|20|30|31)      閏年不能禁止29+
  三位順序碼： \d{3}
*/
function checkedID(str) {
  let reg18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ // 18位
  let reg15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/ //15位
  // return reg.test(str)
  return str.match(reg18)
}
console.log(checkedID('14338119001211003X'));

// 驗證中文 4e00-9fa5
function checkedID(str) {
  let reg = /^[\u4e00-\u9fa5]+$/
  // return reg.test(str)
  return str.match(reg)
}
console.log(checkedID('你好'));

Javascript題目1

你對new運算子的理解是什么? 手動實作一個new方法

問題解答1

function _new(Fn, ...arg) {
  const obj = Object.create(Fn.prototype);
  const obj1 = Fn.apply(obj, arg);
  return obj1 instanceof Object ? obj1 : obj;
}

解題思路1

創建新物件
新物件原型[[prototype]] = 建構式prototype
this 指向新物件
執行建構式
如果建構式回傳非空物件，就回傳這個物件參考，不然回傳創建的新物件

知識擴展

• Object.create()方法是建立一個空物件他有兩個引數, 第一個引數是在原型上新建物件, 第二個引數是在實體上創建物件; 第一個引數是必選的, 第二個引數是可選的
• instanceof 運算子用于檢測建構式的 prototype 屬性是否出現在某個實體物件的原型鏈上.

Object.prototype.age = 'zs'

function fn() {
  this.a = '1';
  this.b = '2'
  this.fn2 = function() {}
}

function fn1() {}
fn1.prototype = new fn() // new一個fn函式 將該實體方法 放到fn1的原型上
console.log(fn1.prototype); // fn的實體
fn.prototype.a = 'ls' //如果原型的屬性和實體的物件相同的時候，優先實體屬性;如果想覆寫原型中的屬性 使用constructor 指向原來的函式物件
fn.prototype = {
  constructor: fn,
  a: 'ls1'
}
let f1 = new fn()
console.log(f1);
console.log(f1.__proto__); //{a: "ls", constructor: ?}
console.log(f1.a); // ls 
console.log(f1 instanceof fn); // true
console.log(f1 instanceof fn1); //fasle
let b = new fn();
// fn.prototype = '3'
console.log(f1.age); // zs
console.log(b.a); //1
console.log(fn1.prototype);
console.log(f1.__proto__ == fn1.prototype); //false
console.log(f1.__proto__ == fn.prototype); //true
console.log(Object.prototype == fn.prototype.__proto__); //true
// 總結：函式物件有prototype屬性，實體物件的__proto__屬性和構造它的原型屬性是相同的,實體物件的__proto__指向建構式的原型;函式的原型物件和物件的原型物件相同，而函式的原型物件的最后指向為null,空物件

** 手撕new建構式

/**
 * new 函式原理：
 * 創建一個物件
 * 將物件的原型指向其建構式的原型
 * 將建構式的this指向指向該函式
 * 判斷該建構式是否回傳非空物件，如果回傳則回傳這個物件的參考否則回傳一個空的物件
 */
function _new() {
  let obj = {};
  obj.__proto__ = [...arguments][0].prototype;
  let res = [...arguments][0].apply(obj, Array.prototype.slice.call(arguments, 1))
  console.log(res);
  console.log(res instanceof Object);
  return res instanceof Object ? res : obj
}

function fn() {
  this.a = arguments[0];
  this.b = arguments[1];
}
//  console.log();
let a = _new(fn, '1', '2');
console.log(a.a); // 1
// 使用建構式的方法
let b = new fn('1');
console.log(b.a); //1

• 第二種方法使用create方法

function _new(Fn, ...arg) {
  const obj = Object.create(Fn.prototype); // 使用crete的方法, 第一個引數是在原型上新建物件, 第二個引數是在實體上創建物件
  const obj1 = Fn.apply(obj, arg);
  console.log(obj1); // undefined
  console.log(obj); // fn {a: "1", b: "2"}
  return obj1 instanceof Object ? obj1 : obj;
}

function fn() {
  this.a = arguments[0];
  this.b = arguments[1];
}
//  console.log();
let a = _new(fn, '1', '2');
console.log(a.a); // 1
// 使用建構式的方法
let b = new fn('1');
console.log(b.a); //1

proto和prototype屬性

公眾號：今日在學