JavaScript面向对象
关注
分享
扫一扫
xyphf_和派孔明
全栈工程师，熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等，可独立构建多页面、单页面应用项目。
展开
-
JavaScript面向对象的程序开发之选项卡Demo讲解——xyp_hf
一、面向对象基础介绍 什么是面向对象编程? 答：就是用对象的思想去写代码，就是面向对象编程。 面向对象编程的（OOP）的特点？ - 抽象:抓住核心问题 - 封装:只能通过对象来访问方法 - 继承：从已有对象上继承出新的方法 - 多态：多对象的不同形态二、写一个面向对象的选项卡原创 2017-05-29 11:39:21 · 765 阅读 · 0 评论 -
什么是面向对象的继承?
继承：子类不影响父类,子类可以继承父类的一些功能 ( 代码复用 ) 属性的继承 : 调用父类的构造函数 采用call修改this指向<script> function CreatePerson(name,sex) { //父类 this.name = name; this.sex = sex; } Cr原创 2017-08-20 17:21:40 · 1063 阅读 · 0 评论 -
什么是面向对象的类式继承?
类： JS是没有类的概念的,把JS中的构造函数看做的类 所以说类式继承也是一种针对构造函数来做继承的一种方式 <script> function Aaa() { // 父类 this.name = '小明'; } Aaa.prototype.showName = function() { aler原创 2017-08-20 21:17:55 · 1135 阅读 · 0 评论 -
什么是原型继承?
<script> var a = { name : '小明' }; var b = cloneObj(a); alert(b.name); function cloneObj(obj) { var F = function () { }; F.protot原创 2017-08-20 21:57:41 · 1830 阅读 · 0 评论 -
JavaScript面向对象的程序常用的继承方式有哪些?
JavaScript面向对象常用的继承方式有拷贝继承、类式继承、原型继承等。 什么是面向对象的继承? http://blog.csdn.net/xyphf/article/details/77430547拷贝继承： 通用型 有没有nwe或无new的时候都可以 http://blog.csdn.net/xyphf/article/details/77430797类式继承： new构造函数 ht原创 2017-08-20 22:02:59 · 357 阅读 · 0 评论 -
JavaScript面向对象的程序之拖拽组件的开发Demo——xyp_hf
今天我们聊一聊JavaScript面向对象的程序之组件的开发，我们写个拖拽组件的Demo例子，来讲述一下这里面的坑组件开发其实也是代码复用的一种形式，很多朋友会问，那么组件和继承到底有什么区别? 我们说继承更像子类继承父类，那么组件更像兄弟之间的关系，它是一种更丰富的代码复用形式，表现出多种不同的形态我们先说一下今天这个拖拽组件的需求 div1红色方块点击按下的时候，无变化； div2黄色方块原创 2017-08-21 12:49:23 · 436 阅读 · 0 评论 -
JavaScript面向对象的程序之弹框组件的开发Demo——xyp_hf
1、首先我们可以写几个input按钮，这个按钮可以用来点击跳出弹窗； 2、在body里面写一个弹框的布局，在给这个弹框写点样式。3、开始编写弹窗组件； 4、获取几个弹窗的按钮，给几个Input按钮添加一个点击事件； 5、要求点击按钮时创建一个弹窗对象并且让它初始化； 6、写弹框的构造函数Dialog() 7、写初始化函数init() 8、init中传入一个json，这个json就是配置参原创 2017-08-22 12:18:22 · 980 阅读 · 0 评论 -
如何利用自定义事件多人协作开发
自定义事件重点并不在事件身上，重点在函数身上自定义事件 : 主要是跟函数有关系,就是让函数能够具备事件的某些特性自定义事件常被用来做多人协作开发 我们看看函数究竟有什么问题，他为什么要用事件的特性才有利于多人协作? 比如说： 我们写了一个函数，里面写了一个alert(1)，这个相当于一个功能；在外面调用； 这时候当项目越来越大，有新的同事假如开发团队，新同事可能会在原有功能的基础上加一些功能原创 2017-08-24 12:06:16 · 506 阅读 · 0 评论 -
基于JQ的选项卡组件开发
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>JQ的选项卡组件DEMO</title><style>#div1 div,#div2 div,#div3 div,#div4 div{ width:200px; height:200px;转载 2017-09-02 11:55:05 · 437 阅读 · 0 评论 -
什么是面向对象的拷贝继承?
面向对象的拷贝继承<script> var a = { name : '小明' }; var b = a; //对象的赋值 存在引用关系 b.name = '小强'; alert(a.name); //小强 因为互相影响</script>我们希望b的修改不会影响到a,b修改以后a.name还是小原创 2017-08-20 17:52:20 · 660 阅读 · 0 评论 -
如何判断一个对象是不是数组？--xyp_hf
方案一：constructor用法：判断一个对象是不是数组 <script> var arr = []; alert( arr.constructor == Array ); // true </script>方案二：用instanceof判断是不是数组<script> var arr = []; alert( arr instanc原创 2017-08-19 18:40:49 · 387 阅读 · 0 评论 -
JavaScript面向对象的程序开发之拖拽Demo讲解——xyp_hf
JavaScript面向对象的程序开发之拖拽Demo讲解——xyp_hf原创 2017-06-27 14:02:39 · 386 阅读 · 0 评论 -
javaScript 写一个简单的面向对象程序
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>简单的面向对象程序</title> <script> // 面向对象 // 1、写构造函数原创 2017-08-18 11:25:27 · 500 阅读 · 0 评论 -
JavaScript什么是包装对象
<script> var str = 'hello'; // 1、首先我们测一下str的数据类型 alert(typeof str); // string 字符串类型 /* * * * * * * * * * * * * * * * * * * * * * * * * * * * 既然是字符串类型，为什么又会有方法呢?原创 2017-08-18 14:25:26 · 980 阅读 · 0 评论 -
JavaScript 什么是原型链?
原型链 : 实例对象与原型之间的链接,叫做原型链下面我们演示个小例子来说明原型链 function Aaa() { } Aaa.prototype.num = 10; var a1 = new Aaa(); alert(a1.num); // 10大家可能会想，为什么这个对象a1可以找到num 1、首先大家发现这个num并原创 2017-08-18 16:57:10 · 3242 阅读 · 1 评论 -
hasOwnproperty的使用,看是不是对象自身下面的属性
<script> // hasOwnProperty(): 看是不是对象自身下面的属性 var arr = []; arr.num = 10; Array.prototype.num2 = 20; //这样写表示所有的数组对象都有了num2这个属性 alert( arr.hasOwn原创 2017-08-19 16:00:38 · 1026 阅读 · 0 评论 -
constructor的使用 : 查看对象的构造函数
constructor : 查看对象的构造函数<script> // constructor : 查看对象的构造函数 // 例 function Aaa() { } var a1 = new Aaa(); alert(a1.constructor); // 弹出Aaa的函数原创 2017-08-19 16:21:40 · 3538 阅读 · 0 评论 -
instanceof的使用: 对象与构造函数在原型链上是否有关系
<script> // instanceof : 对象与构造函数在原型链上是否有关系 function Aaa() { } var a1 = new Aaa(); alert( a1 instanceof Aaa ); // true 查询a1与Aaa是否在原型链上 alert( a1 instanceof原创 2017-08-19 17:13:52 · 511 阅读 · 0 评论 -
toString用法：将对象转换成字符串
想一下toString在哪里 <script> // var arr = []; // alert( arr.toString ); //可以找到 function toString() { [native code] } 的方法 function Aaa() { } var a1 = new Aaa();原创 2017-08-19 18:13:11 · 21925 阅读 · 0 评论 -
Object对象hasOwnProperty方法的作用，如何判断一个JSON对象中是否有某个键key
Object 对象自身用处不大，不过在了解其他类之前，还是应该了解它。因为 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似，ECMAScript 中的所有对象都由这个对象继承而来，Object 对象中的所有属性和方法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。Object 对象具有下列属性：...转载 2019-05-05 16:53:58 · 7559 阅读 · 0 评论