[面试专题]js之面向对象(OOP)

andycall 发布于2019-08-20 14:43 / 3407人阅读

摘要：之面向对象对象类型数据类型分六类简单类型五种复杂类型其中也属于基本类型。

js之面向对象(OOP) js对象类型(Object)

js数据类型分六类,简单类型:Undefined,Null,Bollean,Number,String五种,复杂类型:Object.
其中Undefined、Null、Boolean、Number也属于基本类型。Object、Array和Function则属于引用类型

其中Null类型表示一个空对象引用,typeof (null类型)会返回object

简单类型和复杂类型之间的关系:js中一切皆对象,所以以上简单类型也是对象,但是创建方法不同,利用typeof 检测类型时结果也不同.(这个typeof真是没啥用).例如下例中两个,但是本质上都是对象.

    var name = String("jwy");
    alert(typeof name);//"object"
    var author = "Tom";
    alert(typeof author);//"string"

盘点JS面向对象之继承 原型链

即利用原型链让一个引用类型继承另一个应用类型的方法和属性.
缺点:

重写了原有的prototype,constructor指向了超类.

prototype是超类的实例,因此超类属性会被所有子类实例共享.

创建子类实例时,不能向超类构造函数传参.

function Subtype(){
    //构造函数
}
Subtype.prototype = new Supertype();

借用构造函数(经典继承)

即在子类构造函数中调用超类构造函数,通过call或者apply来绑定上下文对象.

function Subtype(){
 Supertype.call(this);//也可传参
}

缺点:

和构造函数模式一样,方法在构造函数中定义,因此就无法实现函数复用(作为方法)

在超类型的原型中定义的方法，对子类型而言也是不可见的

组合继承(伪经典继承)

即原型链+经典继承,利用原型链继承原型属性和方法,利用借用构造函数继承实例属性

function SuperType (name) {
     this.name = name;
     this.color = ["red"];
}
SuperType.prototype.sayName = function () {
     console.log(this.name) 
}
function SubType (name,age) {
     SuperType.call(this,name) 
     this.age = age;    
}
SubType.prototype = new SuperType();
SubType.constructor = SubType;
SubType.prototype.sayAge = function () {
     console.log(this.age) 
}
var subInstance = new SuperType("zchang",11);
var subInstance1 = new SuperType("zc",18);

寄生式继承

即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后返回该对象.

function createAnother (origin) {
     var clone = objects(origin);//某个函数创建新对象
     clone.sayHi = function () {
          console.log("hi") 
     }
     return clone;
}

组合寄生式继承

function SuperType(name) {
    this.name = name;
    this.color = ["red"];
}
SuperType.prototype.sayName = function() {
    console.log(this.name)
}

function SubType(name, age) {
    SuperType.call(this, name)
    this.age = age;
}
// SubType.prototype = new SuperType();
function inheritPrototype(subtype, supertype) {
    var prototype = object(supertype);
    prototype.constructor = subtype;
    subtype.prototype = prototy
}
inheritPrototype(SubType, SuperType);
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function() {
    console.log(this.age)
}
var subInstance = new SuperType("zchang", 11);
var subInstance1 = new SuperType("zc", 18);

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81866.html

【译】每个JavaScript 开发者应该了解的10个面试题

摘要：避免脆弱的基类问题。红牌警告没有提到上述任何问题。单向数据流意味着模型是单一的事实来源。单向数据流是确定性的，而双向绑定可能导致更难以遵循和理解的副作用。原文地址 1. 你能说出两种对 JavaScript 应用开发者而言的编程范式吗？希望听到： 2. 什么是函数编程？希望听到： 3. 类继承和原型继承的不同？希望听到 4. 函数式编程和面向对象编程的优缺点？ ...

mykurisu 2019-05-22 18:24 评论0 收藏0
PHP面试总结

摘要：而在面试过程中，也是经常会遇到的，所以，无论是面试准备还是日常开发，我们都应该关注这方面的东西。二分法的基本做法是确定要查找的区间。区间内选取二分点。根据二分点的值，综合左右区间情况以及求解的目的，舍去一半无用的区间。 showImg(https://images.pexels.com/photos/935977/pexels-photo-935977.jpeg); 前言面试是你进入...

alin 2019-07-01 12:30 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

lemanli 2019-08-02 15:57 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

xfee 2019-08-21 11:53 评论0 收藏0
[面试专题]一线互联网大厂面试总结

摘要：道阻且长啊前端面试总结前端面试笔试面试腾讯一面浏览器工作原理浏览器的主要组件包括用户界面包括地址栏后退前进按钮书签目录浏览器引擎用来查询及操作渲染引擎的接口渲染引擎渲染界面和是基于两种渲染引擎构建的，使用自主研发的渲染引擎，和都使用网络用来道阻且长啊TAT(前端面试总结) 前端面试笔试面试腾讯一面 1.浏览器工作原理浏览器的主要组件包括：用户界面－包括地址栏、后退/前...

littleGrow 2019-08-05 11:51 评论0 收藏0