JavaScript模拟实现封装的三种方式及写法区别

前  言

　  继承是使用一个子类继承另一个父类，那么子类可以自动拥有父类中的所有属性和方法，这个过程叫做继承！  JS中有很多实现继承的方法，今天我给大家介绍其中的三种吧。

1.在 Object类上增加一个扩展方法

//声明一个父类
function Person(name){
 this.name=name;
 this.age=age;
 this.say=function(){
   alert("我叫"+this.name);
 }
}
//声明一个子类
function Student(){
 this.no=no;
 this.study=function(){
  alert("我在学习！");
 }
}
// 通过循坏，将父类对象的所有属性和方法，全部赋给子类对象
Object.prototype.extend=function(parent){
 for(var i in parent){
   this[i].parent[i];
 }
}
var p=new Person("张三",12);
var s=new Student("1234567");
//子类对象调用这个扩展方法
s.extend()
console.log(s);

上述实现继承的原理：

通过循坏，将父类对象的所有属性和方法，全部赋给子类对象。关键点在于for-in循坏，即使不扩展Object,也能通过简单的循坏实现操作。

但是用这种方法实现继承也有一些缺点：

①无法通过一次实例化，直接拿到完整的子类对象。而需要先拿到父类对象和子类对象两个对象，再手动合并；

②扩展Object的继承方法，也会保留在子类的对象上。

再来看看第二种实现继承的方法吧~

2.使用原型继承

在介绍这种方法之前先来说两个概念：原型对象与原型

1、prototype:函数的原型对象

①只有函数才有prototype，而且所有函数必有prototype

②prototype本身也是一个对象！

③prototype指向了当前函数所在的引用地址！

2、__proto__:对象的原型！

①只有对象才有__proto__，而且所有对象必有__proto__

②__proto__也是一个对象，所以也有自己的__proto__，顺着这条线向上照的顺序，就是原型链。

③函数、数组都是对象，都有自己的__proto__

//声明父类
function Person(name,age){
   this.name=name;
   this.age=age;
   this.say=function(){
    alert("我叫"+this.name);
   }
}
//声明子类
function Student(no){
   this.no=no;
   this.study=function(){
    alert("我在学习！我叫"+this.name+"今年"+this.age");
   }
}
//将父类对象赋给子类的prototype
Student.prototype=new Person("张三",14);
//拿到子类对象时，就会将父类对象的所有属性和方法，添加到__proto__
var s=new Student();
s.study();

使用原型继承的原理：

将父类对象，赋值给子类的prototype，那么父类对象的属性和方法就会出现在子类的prototype中。那么，实例化子类时，子类的prototype又会到子类对象的__proto__中，最终，父类对象的属性和方法，会出现在子类对象的__proto__中。

这种继承的特点：

①子类自身的所有属性都是成员属性，父类继承过来的属性都是原型属性。

②依然无法通过一步实例化拿到完成的子类对象。

第三种实现继承的方法：

call()和apply()还有bind()，这三种方法很相似，只有在传参方面有所不同。

function Person(name,age){
  this.name=name;
  this.age=age;
  this.say=function(){
    alert("我叫"+this.name);
    }
}
function Student(no,name,age){
  this.no=no;
  this.study=function(){
    alert("我在学习！");
  }
//将父类函数的this,指向为子类函数的this
Person.call(this,name,age);
}
var s=new Student(12,"张三",24);
console.log(s);

三个函数的唯一区别，在于接受func的参数列表的方式不同，除此之外，功能上没有任何差异！

三个函数的写法(区别)：

call写法：func.call(func的this指向的obj,func参数1,func参数2,...);

apply写法：func.apply(func的this指向的obj,[func参数1,func参数2,...]);

bind写法：func.bind(func的this指向的obj)(func参数1,func参数2,...);

总结

以上所述是小编给大家介绍的JavaScript模拟实现封装的三种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • angularJS 指令封装回到顶部示例详解

    关于angularJS如何回到顶部,还是直接code吧! 1.构建指令,使用registerDirective构建指令添加到内部的hasDirectives对象内,以方便后面在全局查找指令的时候进行匹配. /** **回到顶部 **/ define(["app"], function (app) { app().registerDirective("backToTop", function () { return { restrict: "E",

  • weUI应用之JS常用信息提示弹层的封装

    weUI应用之JS常用信息提示弹层的封装

    weUI应用,自己用JS封装了几个常用的信息提示的弹层 测试页面的代码在后面有贴出 几个弹层如下图 HTML页面代码: <!DOCTYPE html> <html> <head> <title>weUI-test</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,c

  • 原生js仿jquery实现对Ajax的封装

    前言 与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服.但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它. 首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下: //data作为参数传入我们下面封装的函数 var data = { //数据 user:"yonghu1&qu

  • JS封装的选项卡TAB切换效果示例

    JS封装的选项卡TAB切换效果示例

    本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}

  • httpclient模拟post请求json封装表单数据的实现方法

    废话不说上代码: public static String httpPostWithJSON(String url) throws Exception { HttpPost httpPost = new HttpPost(url); CloseableHttpClient client = HttpClients.createDefault(); String respContent = null; // json方式 JSONObject jsonParam = new JSONObject(

  • PHP封装返回Ajax字符串和JSON数组的方法

    实例如下: <?php class DBDA { public $host="localhost"; public $uid = "root"; public $pwd = "123"; public $dbname = "mydb"; //成员方法 public function Query($sql,$type=1) { $db = new MySQLi($this->host,$this->uid,$t

  • D3.js封装文本实现自动换行和旋转平移等功能

    D3.js封装文本实现自动换行和旋转平移等功能

    我们下面话不多说,本文主要介绍的是利用D3.js封装文本实现自动换行功能的步骤,下面来一起看看吧. 一.引用 multext.js 文件 multext.js function appendMultiText(container, str, posX, posY, width, fontsize, fontfamily){ if( arguments.length < 6){ fontsize = 14; } if( arguments.length < 7){ fontfamily = &q

  • php封装json通信接口详解及实例

    php创建JSON数据详解: <?php //创建一个字符数组 $arr=array( 'id'=>1, 'name'=>'david' ); echo json_encode($arr);//这个是创建JSON的关键函数 ?> 实现结果 {"id":1,"name":"david"} 注意: json_encode($value);这个函数只能接收utf-8编码的数据.其他格式数据传给该函数返回null; 封装通信接口的

  • JavaScript模拟实现封装的三种方式及写法区别

    前  言   继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上增加一个扩展方法 //声明一个父类 function Person(name){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明一个子类 function Student()

  • JavaScript常用截取字符串的三种方式用法区别实例解析

    stringObject.substring(start,stop) 用于提取字符串中介于两个指定下标之间的字符. start必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置. stop可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. start从0开始 到stop(不包含stop)结束 不接受负的参数. stringObject.substr(start,

  • JavaScript中绑定事件的三种方式及去除绑定

    在JavaScript中,有三种常用的绑定事件的方法 第一种办法 函数写在结构层里面 非常不好,使页面很混乱,行为与结构得不到分离 <input type="button" onclick="func();"> 绑定事件的第二种办法 好处:行为与结构开始分离 缺点: 第二种绑定方式中只能给一个时间绑定一个处理函数 即.onclick = fn1;  .  onclick = fn2 最终的效果是onclick = fn2 <select name=

  • 详解JavaScript实现JS弹窗的三种方式

    详解JavaScript实现JS弹窗的三种方式

    目录 一.前言 二.什么是JavaScript,有什么用? 三.HTML嵌入JavaScript的方式: 第一种方式: 第二种方式: 第三种方式: 总结 一.前言 html和css的学习大致完成,我们进入重要的JavaScript学习阶段 二.什么是JavaScript,有什么用? Javascript是运行在浏览器上的脚本语言.简称JS. 他的出现让原来静态的页面动起来了,更加的生动. 三.HTML嵌入JavaScript的方式: 第一种方式: 1.要实现的功能: 用户点击以下按钮,弹出消息框

  • JavaScript弹出对话框的三种方式

    JavaScript弹出对话框的三种方式

    学习过js的小伙伴会发现,我们在一些实例中用到了alert()方法.prompt()方法.prompt()方法,他们都是在屏幕上弹出一个对话框,并且在上面显示括号内的内容,使用这种方法使得页面的交互性更精彩,实际上我们经常会在进行网页浏览时简单这种类型的对话框,在用户与应用程序进行双向交流时,经常要用到对话框. javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prompt()来获得,可以利用这些对话框来完成js的输入和输出,实现与用户能进行

  • JavaScript中实现继承的三种方式和实例

    JavaScript中实现继承的三种方式和实例

    javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 所谓的类式继承就是指模仿传统面向对象语言的继承方式,继承与被继承的双方都是"类",代码如下: 首先定义一个父类(或超类): function Person(name){ this.name=name; } Person.prototype.getName=function(){ retu

  • JavaScript获取tr td 的三种方式全面总结（推荐）

    /* 第一种,原生的js,先获取table然后获取tr标签,然后遍历td */ // $('#selectIds').val(""); // var table = document.getElementById("tb_table");//获取第一个表格 // var array = table.getElementsByTagName("tr");//所有tr // for(var i = 1; i < array.length; i+

  • JavaScript中清空数组的三种方式

    方式1,splice var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组,即被清空了 方式2,length赋值为0 这种方式很有意思,其它语言如Java,其数组的length是只读的,不能被赋值.如 int[] ary = {1,2,3,4}; ary.length = 0; Java中会报错,编译通不过. 而JS中则可以,且将数组清空了,如 var ary = [1,2,3,4]; ary.

  • javascript函数命名的三种方式及区别介绍

    javascript函数命名的三种方式及区别介绍 第一 复制代码 代码如下: function fn(val1,val2) { alert(val1+val2); } fn(1,2); 第二 复制代码 代码如下: var fn=function() { alert(val1+val2); } fn(1,2); 第三 复制代码 代码如下: var fn=new Function("alert(val1+val2)"); fn(1,2); 上面三种方式逻辑上是等价的,但是还是有点小区别:区

  • javascript实现数据双向绑定的三种方式小结

    前端数据的双向绑定方法 前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下.目前实现数据双向绑定主要有以下三种. 1.手动绑定 比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方法),调用时手动调用get或set数据,改变数据后出发UI层的渲染操作:以视图驱动数据变化的场景主要应用与input.select.textarea等

随机推荐