javascript面试题继承实现的几种方式。

羅小子
羅小子
羅小子
12
文章
3
评论
一月 2, 202107:53:43 评论

在面试中经常会被问到怎么实现一个继承?实现继承有那几种方式?问这个是要考面试者对于js的基础掌握程度。

javascript面试题继承实现的几种方式。

如果要实现继承,肯定需要一个父类,先定义一个父类:

// 定义一个人
function People(name) {
  // 属性
  this.name = name || 'People';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉!');
  }
}
// 原型方法
People.prototype.eat = function(food) {
  console.log(this.name + '正在吃:' + food);
};

原型继承

核心: 将父类的实例作为子类的原型。

function UserName(){ 
}
UserName.prototype = new People();
UserName.prototype.name = '羅小子';

// Test Code
var cat = new UserName();
console.log(UserName.name);
console.log(UserName.eat('fish'));
console.log(UserName.sleep());
console.log(UserNameinstanceof People); //true 
console.log(UserName instanceof UserName); //true

构造函数继承

核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)

function UserName(name){
  People.call(this);
  this.name = name || '羅小子';
}

// Test Code
var userName = new UserName();
console.log(userName .name);
console.log(userName .sleep());
console.log(userName  instanceof People); // false
console.log(userName  instanceof UserName ); // true

实例继承

核心:为父类实例添加新特性,作为子类实例返回

function UserName(name){
  var instance = new People();
  instance.name = name || '羅小子';
  return instance;
}

// Test Code
var userName = new UserName();
console.log(userName .name);
console.log(userName .sleep());
console.log(userName instanceof People); // true
console.log(userName instanceof UserName); // false

拷贝继承

function UserName(name){
  var people= new People();
  for(var p in people){
    UserName.prototype

= people

; } this.name = name || '羅小子'; } // Test Code var userName = new UserName(); console.log(userName.name); console.log(userName.sleep()); console.log(userName instanceof People); // false console.log(userName instanceof UserName); // true

 

继续阅读
羅小子
javascript面试题防抖节流 前端

javascript面试题防抖节流

在前端开发中经常会处理input事件和滚动条监听事件,为了更好提升性能开发者可以使用防抖和节流。 防抖(debounce):触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算...
javascript面试题数组去重 前端

javascript面试题数组去重

前端对于数组去重有很多种方法,面试时能说出3-4种基本就可以了 。 // 全局变量 const arr = ; 双重循环加splice() 这种方法是通过双重循环判断值是否相等如果相等就使用splic...
整理vue面试题(二) 前端

整理vue面试题(二)

vue常见面试题整理第二章: 1.vue优点? 轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。 2.vue父组件向子组件传递数据? 通过属性方式传递数据,子组件...
整理vue面试题(一) 前端

整理vue面试题(一)

Vue.js是前端三大框架之一,很多公司都在使用。相比于其它两个框架,vue的学习成本是最低,也是最容易上手的。深受后端程序猿的喜爱。 一,生命周期面试题 1.什么是vue的生命周期? vue生命周期...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: