web前端面试-- 手写原生Javascript方法(new、Object.create)

web面试题

本人是一个web前端开发工程师,主要是vue框架,整理了一些面试题,今后也会一直更新,有好题目的同学欢迎评论区分享 ;-)

web面试题专栏:点击此处


手动实现Object.create

通过Object.create,可以联想到之前讲的JS的7种继承方式之一 原型式继承

实现

js 复制代码
function myCreate(obj) {
    function Fn() { }
    Fn.prototype = obj;
    return new Fn();
}

测试

js 复制代码
var obj = { a: 1, b: 2 }
var obj1 = myCreate(obj)
console.log("obj1:", obj1);
console.log("obj1.a:", obj1.a);

var obj2 = Object.create(obj)
console.log("obj2:", obj2);
console.log("obj2.a:", obj2.a);

new操作符

  1. 新建一个空对象
  2. 将对象的原型__proto__ 指向Fn的prototype
  3. 运行构造函数,并且通过.call 修改函数的作用域,指向obj
  4. 返回构造函数生成的对象,如果不是对象,则返回obj

实现

js 复制代码
function myNew(Fn,...args){
	let obj = Object.create(null);
	obj.__proto__ = Fn.prototype;
	let result = Fn.call(obj,...args);
	return result instanceof Object ? result : obj;
}

测试

js 复制代码
function Fruits(name, price) {
	this.name = name;
	this.price = price;
	this.sayName = function () {
	  console.log(`我是水果:${this.name}`);
	};
	this.sayPrice = function () {
	  console.log(`${this.name}的价格:${this.price}...`);
	};
	return {
	  sayName: () => {
	    console.log(`我是水果:${this.name}`);
	  },
	  sayPrice: () => {
	    console.log(`${this.name}的价格:${this.price}...`);
	  },
	};
}

let banana = new Fruits("香蕉", 10);
banana.sayName();
banana.sayPrice();
console.log(banana);

function myNew(Fn, ...args) {
	let obj = Object.create(null);
	obj.__proto__ = Fn.prototype;
	let ret = Fn.call(obj, ...args);
	return ret instanceof Object ? ret : obj;
}

let banana2 = myNew(Fruits, "香蕉2号", 20);
banana2.sayName();
banana2.sayPrice();
console.log(banana2);

未完待续...

相关推荐
文心快码BaiduComate3 分钟前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛3 分钟前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
ssshooter36 分钟前
MCP 服务 Streamable HTTP 和 SSE 的区别
人工智能·面试·程序员
IT_陈寒1 小时前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
DIY机器人工房1 小时前
【嵌入式面试题】STM32F103C8T6 完整元器件解析 + 面试问题答案
stm32·单片机·面试·嵌入式·面试题·diy机器人工房
袁煦丞1 小时前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧1 小时前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i1 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
来旺1 小时前
互联网大厂Java面试全解析及三轮问答专项
java·数据库·spring boot·安全·缓存·微服务·面试
Json____1 小时前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express