面向对象
jiaojsun
做一只快乐的小码龙
展开
-
面向对象--工厂方式和构造函数
1. 工厂方式工厂方式面向对象中的封装函数改成与系统对象类似写法 首字母大写New 关键字提取This指向为新创建的对象构造函数 用来创建对象的函数,叫做构造函数存在的问题 对象的引用浪费内存//工厂方式 : 封装函数function createPerson(name){ //1.原料 var obj = new Object(); //2.原创 2017-10-08 15:31:43 · 290 阅读 · 0 评论 -
面向对象(创建对象)--七种模式总结
工厂模式(工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型))function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function...原创 2018-10-07 12:22:47 · 195 阅读 · 0 评论 -
面向对象(继承)--原型链01
首先回顾一下构造函数、原型和实例的关系?每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。如下图所示现在我们引入原型链的概念?假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例...原创 2018-10-07 23:37:01 · 103 阅读 · 0 评论 -
面向对象(继承)--借用构造函数02
首先回顾一下原型链中引用类型值带来的问题function SuperType() { this.colors = ["red", "blue", "green"];} function SubType() {}//继承了 SuperTypeSubType.prototype = new SuperType();var instance1 = new SubType();...原创 2018-10-08 10:56:56 · 234 阅读 · 0 评论 -
面向对象(理解对象)--属性类型01
1.了解对象 对象:无序属性的集合,其属性可以包含基本值、对象或者函数。通俗讲就是可以把对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数 早期创建对象的写法现在使用对象字面量的方法 2.属性类型 ECMAScript 中有两种属性:数据属性和访问器属性1)数据属性数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行...原创 2018-09-29 10:57:00 · 885 阅读 · 0 评论 -
面向对象(理解对象)--定义属性02
1.定义多个属性Object.defineProperties()方法。利用这个方法可以通过描述符一次定义多个属性。这个方法接收两个对象参数:第一个对象是要添加和修改其属性的对象,第二个对象的属性与第一个对象中要添加或修改的属性一一对应。例如:var book = {};Object.defineProperties(book, { _year: { value...原创 2018-09-29 11:24:09 · 221 阅读 · 0 评论 -
面向对象(创建对象)--工厂模式01
考虑到在 ECMAScript 中无法创建类,开发人员就发明了一种函数,用函数来封装以特定接口创建对象的细节,如下面的例子所示function createPerson(name, age, job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName =...原创 2018-09-29 11:31:43 · 189 阅读 · 0 评论 -
面向对象(继承)--组合继承03
组合继承,指的是将原型链和借用构造函数的技术组合到一块。使用原型链实现对原型属性和方法的继承,通过借用构造函数来实现对实例属性的继承。首先回忆一下什么叫原型链function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return thi...原创 2018-10-08 14:00:33 · 132 阅读 · 0 评论 -
面向对象(继承)--原型式继承04
借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。function object(o){ function F(){} F.prototype = o; return new F(); } 在 object()函数内部,①创建了一个临时性的构造函数,②将传入的对象作为这个构造函数的原型,③返回了这个临时类型的一个新实例。从本质上讲,object()对传入...原创 2018-10-08 16:26:04 · 132 阅读 · 0 评论 -
面向对象(继承)--寄生式继承05
寄生式继承是与原型式继承紧密相关,先回忆一下object(o)函数:function object(o){ function F(){} F.prototype = o; return new F(); } 寄生式函数是什么样的:①创建一个仅用于封装继承过程的函数,②该函数在内部以某种方式来增强对象,③返回对象。以下代码示范了寄生式继承模式。function cre...原创 2018-10-08 16:36:11 · 147 阅读 · 0 评论 -
面向对象(继承)--寄生组合式继承06
还记得组合继承吗,回忆一下function SuperType(name) { this.name = name; this.colors = ["red", "blue", "green"];}SuperType.prototype.sayName = function () { alert(this.name);};function SubType(nam...原创 2018-10-08 16:55:06 · 133 阅读 · 0 评论 -
面向对象(创建对象)--构造函数模式02
上一篇工厂模式中有一个例子现在创建自定义的构造函数,从而定义自定义对象类型的属性和方法。例如,可以使用构造函数模式将上面的例子重写如下 function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function (...原创 2018-09-29 17:15:04 · 236 阅读 · 0 评论 -
面向对象(继承)--ES6Class的继承07
1.基本格式class Point { constructor(x, y) { this.x = x; this.y = y; }}class ColorPoint extends Point { constructor(x, y, color) { super(x, y); this.color = color; // 正确 }}...原创 2018-10-19 14:43:08 · 166 阅读 · 0 评论 -
面向对象(创建对象)--稳妥构造函数模式07
所谓稳妥对象,指的是没有公共属性,而且其方法也不引用 this 的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用 this 和 new ),或者在防止数据被其他应用程序(如 Mashup程序)改动时使用。稳妥构造函数遵循与寄生构造函数类似的模式,但有两点不同:一是新创建对象的实例方法不引用 this ;二是不使用 new 操作符调用构造函数。按照稳妥构造函数的要求,可...原创 2018-10-07 12:07:04 · 132 阅读 · 0 评论 -
面向对象(创建对象)--动态原型模式05
可以通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。function Person(name, age, job) { //属性 this.name = name; this.age = age; this.job = job; // 方法 if (typeof this.sayName != "function") { ...原创 2018-10-07 11:52:13 · 136 阅读 · 0 评论 -
面向对象(创建对象)--组合使用构造函数模式和原型模式04
首先回顾一下构造函数模式和原型模式构造函数模式function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName;}function sayName() { alert(this.name);}v...原创 2018-10-07 11:35:54 · 138 阅读 · 0 评论 -
面向对象--传统的过程式和面向对象式编写选项卡
现在,有这样一个布局<style>#div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}.active{ background:red;}</style><body><div id="div1"> <input class="active" type="button" value="1"原创 2017-11-22 11:33:07 · 176 阅读 · 0 评论 -
面向对象--控制多个选项卡自动播放
感受一些面向对象的好处:灵活<script>window.onload = function(){ var t1 = new Tab('div1'); t1.init(); t1.autoPlay(); var t2 = new Tab('div2'); t2.init(); t2.autoPlay();};function Tab(id){ t原创 2017-11-22 11:42:50 · 285 阅读 · 0 评论 -
面向对象--包装对象
首先看下面例子,str是string类型,但是为什么会有自己的方法呢?这就关系到包装类型var str = 'hello';alert( typeof str );//stringstr.charAt(0);str.indexOf('e');上面是什么原因呢? ,当出现str.charAt(0),即str后面跟方法时。基本类型会找到对应的包装对象类型,然后包装对象把所有的属性和方法给了基本原创 2017-11-23 10:49:33 · 653 阅读 · 0 评论 -
面向对象--原型链
1. 什么是原型链 原型链 : 实例对象(a1)与原型(Aaa.prototype)之间的连接,叫做原型链举个例子Aaa.prototype.num = 10;var a1 = new Aaa();alert(a1.num);//10上面的代码可以用下面图表示出来 接着看function Aaa(){ this.num = 20;}Aaa.prototype.num = 10原创 2017-11-23 11:16:56 · 236 阅读 · 0 评论 -
面向对象--hasOwnProperty和constructor
1. hasOwnProperty() hasOwnProperty() : 看是不是对象自身下面的属性看例子,因为num是arr所特有的,所以返回true,而num2是所有的Array都有的,所以返回false。var arr = [];arr.num = 10;Array.prototype.num2 = 20;alert( arr.hasOwnProperty('num')原创 2017-11-23 11:38:01 · 201 阅读 · 0 评论 -
面向对象--instanceof
instanceof : 对象与构造函数在原型链上是否有关系直接看代码function Aaa(){}var a1 = new Aaa();alert( a1 instanceof Aaa); //truealert( a1 instanceof Array); //falsealert( a1 instanceof Object); //false面试题,如何判断一个变量是不是数组原创 2017-11-23 14:32:23 · 198 阅读 · 0 评论 -
面向对象--利用toString做类型判断
1. 了解toString toString() : 系统对象下面都是自带的 , 自己写的对象都是通过原型链找object下面的解释一下上面这句话,假如是arr的话,则toString在Array.pro下面。假如是a1的话toString在Object.pro下面。不管是系统对象还是自己写的面向对象,都可以找到toString方法,如下var arr = [];alert( arr.toS原创 2017-11-23 15:05:41 · 682 阅读 · 0 评论 -
面向对象--类式继承
类式继承:利用构造函数(类)继承的方式类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 举例function Aaa(){ //父类 this.name = '小明';}Aaa.prototype.showName = function(){ alert( this.name );};function Bbb(){ //子类 }Bbb.protot原创 2017-11-24 14:52:02 · 236 阅读 · 0 评论 -
面向对象--继承
1. 什么是继承 在原有对象的基础上,略作修改,得到一个新的对象,不影响原有对象的功能。即子类不影响父类,子类可以继承父类的一些功能 ( 代码复用 )function CreatePerson(name,sex){ //父类 this.name = name; this.sex = sex;}CreatePerson.prototype.showName = funct原创 2017-11-23 15:57:07 · 147 阅读 · 0 评论 -
面向对象--原型继承
原型继承:借助原型来实现对象继承对象var a = { name : '小明'};var b = cloneObj(a);alert( b.name );//‘小明’function cloneObj(obj){ var F = function(){}; F.prototype = obj; return new F(); }链形图如下 ```var a原创 2017-11-24 15:26:23 · 181 阅读 · 0 评论 -
面向对象(创建对象)--原型模式03(上)
回顾一下用构造函数模式编写的代码function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName;}function sayName() { alert(this.name);}var person...原创 2018-10-07 10:32:09 · 109 阅读 · 0 评论 -
面向对象(创建对象)--原型模式03(下)
3. 更简单的原型语法为减少不必要的输入,也为了从视觉上更好地封装原型的功能,更常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象。function Person(){}Person.prototype = {name : "Nicholas",age : 29,job : "Software Engineer",sayName : function () {...原创 2018-10-07 10:50:42 · 118 阅读 · 0 评论 -
面向对象(继承)--总结
1.面向对象(继承)--原型链01假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立,如此层层递进,就构成了实例与原型的链条。function SuperType() { this.property ...原创 2019-06-24 15:14:13 · 167 阅读 · 0 评论