面向对象01
一、面向对象与面向过程的异同：动态创建一个元素，并添加到页面中去：jquery实现方式：以下是面向对象的方式组织代码（管理者）Js实现方式：以下方式 是使用面向对象过程的方式来组织代码（执行者）创建一个div元素，设置div内容，将div追加到页面中去
面向过程：所有的细节、步骤、过程要一步步亲历亲为（执行者）面向对象：找到能完成这个事情的对象，让它帮你完成（调度者）面向对象是对面向过程的封装。// 通过标签名获取元素function tag(tagStr) {return document.getElementsByTagName(tagStr);}var divs= tag("div");for(var i= 0; i< divs.length; i++) {divs.style.border= "1px dotted red";8}var ps= tag("p");for(var i= 0; i< ps.length; i++) {ps.style.border= "1px dotted red";}
二、全局污染使大量函数无法管理；在全局范围内都有效三、常用DOM操作1、获取元素操作getElementById getElementByTagNamegetElementByClassName2、元素节点操作appendChild（追加子节点）insertBeforeChild（在某节点前插入节点）removeChild（移除子节点）replaceChild（替换子节点）cloneNode(克隆节点)createElement（创建标签）createTextNode(创建文本节点)3、属性节点操作getAttribute（获取标签属性）setAttribute（设置标签属性）removeAttribute(移除标签属性)4、常用DOM属性className innerHTMLinnerText/textContentvaluechildren5、DOM就是一个非常典型的面向对象，所有节点都对象五、对象字面量1、对象是键值对的集合// json 的表示法， 对象字面量（直接量）var p= { name: "jim", age: 19, sex: "男", sayHello: function() { alert("你好，哈哈哈哈"); }};p.sayHello();p["sayHello"]();// 关联数组
2、字面量的缺点是：无法复用3、构造函数优势是：可以复用 构造函数使用注意点： 函数名以大写字母开头（推荐）； 不需要返回值； 为对象添加成员使用：this.成员名=值； 创建对象使用new关键字。var Person= function() { this.name= "jim"; this.age= 19; this.gender= "男";
this.sayHello= function() { alert("你好，哈哈哈哈"); };};// 创建对象（构造函数Person的对象）var p= new Person();// 访问对象的 属性console.log(p.name);// 访问对象的 方法p.sayHello();六、函数的参数注意点1、把函数参数看作是变量，只能在函数内部使用2、函数调用时参数传入顺序不能颠倒3、参数的值是在函数被调用时通过传入的设置的值4、函数调用时传入参数，则函数内部获取参数的值为：undefined原型（prototype）
一、原型的说明1、只要是函数就有prototype属性，即函数的原型属性2、函数的原型属性（prototype）是对象类型的3、由构造函数创建出来的对象，会默认链接到其构造函数的这个（prototype）属性上4、构造函数的prototype属性的作用是：实现数据共享5、属性查找规则： 首先会在当前对象中查找有没有该属性； 如果当前对象中没有，就会在构造函数的定义规则中查找 如果没有，就会到与对象联系起来的构造函数的prototype属性中找6、属性修改和读取的区别 获取操作： 遵循5、 赋值操作（只与当前对象有关）; 只会操作对象本身，如果对象中没有该属性则创建该属性，并赋值；如果对 象中有，则修改
二、_proto_ 与prototype的区别_proto_1、_proto_是一个非标准的属性2、对象的_proto_与创建它的构造函数的prototype是一个东西相同点Prototype1、是原型属性_proto_ 与prototype的异同：相同点：这两个都是属性，存储的是对象的引用 这两个属性的引用指向了同一个对象不同点： 站在不同角度去看这两个属性： Protytype是站在构造函数的角度 _proto_是站在对象的角度，是非标准属性原型属性和原型对象：是同一个东西，只是站在同一个角度去看这一个东西，对它的不同叫法。原型的一些结论：1.只要是函数就有prototype属性2.由构造函数创建出来的对象会默认链接到其构造函数的prototype属性上3.函数的protytype属性的类型是：object4.原型的作用：数据共享（实际是为了实现继承）JavaScript 面向对象基础复习填空练习题：
1.JavaScript 的构成: _dom____, _bom____,和 __ECMAscript__.
2.JavaScript 的数据类型分为两种:基本数据类型_____, _复杂数据类型____.
和空类型（null和undefined）基本类型有: ____string_, boolean_____, number_____.
复合数据类型: ___Array_ Function Date Object_. Math特殊类型: nullundefined_____,
3.常见的内置对象有: __Math_()__, __String()___, _Data()____, ____Function()_, Boolean()_____, RegExp()___, Number()___,和 _Array()Object()_.
4.将代码进行封装,复用的逻辑单元 称为 _函数____.
5.定义函数的基本语法为:
1> 函数声明方式：function array(){ ｝2>函数表达式： var array=function(){}6.什么是对象: ___无序键值对的集合__.
7.什么是属性: __对象键如果是一个普通的类型（非函数）8.什么是方法: __如果一个对象的属性是一个函数此时就叫做方法___.
成员包括：属性和方法
9.原型的基本概念
：10.对象的原型是什么 __构造函.prototype_____.
11.如何获得原型对象: ___构造函.prototype__和 对象._proto____.
12.原型的作用(为什么需要原型): __数据共享__.
13.继承的概念
一、javaScript的类型：是一个弱类型的语言，弱类型体现在什么地方？1.是有类型的2.它不受类型的约束3.Typeof无法准确获取对象的类型 二、为什么要获取对象的类型？怎样获取？1、使封装变得简单方便2、通过对象获取：每个原型对象中有个属性叫做constructor（构造器）,是原型提供的属性，而这个原型（也就是构造函数的prototype的值）是对象类型的，这个constructor属性，又指向了一个构造函数获取方式一：通过截取字符串获取var s= ctr.constructor + "";s= s.replace("function","|");var start= s.indexOf( '|' );var end= s.indexOf('(');if ( start!= -1 && end!= -1 ) { var name= s.slice(start + 2, end); alert("|" + name+ "|" );}
获取方式二：通过正则表达式获取
封装后：
获取方式三：通过name属性获取（兼容性问题，IE不支持）
三、面向对象特征介绍1、三大特征：封装、继承、多态（了解）继承的两种方式：原型继承、混入继承：混入继承：2、原型继承：原型继承的实现方式：方式一：利用对象的动态特性// 对象的动态特性var o= {};o.name = "川川";o.age = 19;o.gender= "男";function Person() {}// 将需要的属性添加到原型对象中Person.prototype.sayHi= function() {};var p= new Person();p.sayHi();
方式二：利用覆盖原型对象的方式注意：想要变得更严谨需要加入constructor:Person
方式三：利用混入继承来给原型对象添加成员
原型继承的结论：1、任何函数都可以做为构造函数2、函数默认就有一个prototype属性3、函数的prototype就是原型4、构造函数的prototype的类型是对象5、通过构造函数创建出来的对象默认会链接到构造函数的prototype中6、原型的成员可以被对象共享3、经典继承（Object.create）var o1= { sayHi: function() { alert("hello，i am chuanchuan"); }};var o2= Object.create(o1);四、原型链1、理解： 对象有原型对象，原型对象也是对象，所以原型对象也有原型对象，这样一环扣一环就形成了原型链。2、原型链结构3、简单数据的内存逻辑基本数据类型：存储的是数据本身 复杂数据类型：存储的是数据的引用
五、构造函数是一种函数，主要用来创建对象时，对对象进行初始化（即为对象成员赋初始值），与new运算符一起使用
方式三：利用混入继承的方式
原型相关结论：想要创建一个对象，就要有一个构造函数;如果想让某个对象继承自另外一个对象 ，只需要修改该对象的原型对象
六、构造函数和原型的结论：1、只要是函数就有prototype属性2、函数的属性prototype是一个对象类型3、属性prototype是一个含有constructor和_proto_属性的对象4、Constructor属性指向的是当前的构造函数5、函数的prototype属性扬表示的对象继承自Object.prototype七、自定义对象与构造函数的结论1、对象P是Person的实例2、P继承自Person.prototype3、P._proto_就是Person.prototype八、原型继承Object.create创建对象的两种方式：
Object.create会创建一个对象 ，并且这个新对象会继承原对象的属性
九、Object.prototype常用成员1、Constructor2、hasOwnProperty 作用：判断有没有指定的属性，如果属性是自身提供的就返回true，否则返回false 语法：object.hasOwnProperty(属性名)Eg：var o= {name: "abc"};var hasName= o.hasOwnProperty("name");console.log(hasName);
3、isPrototypeOf作用：判断对象1是否为对象2的原型对象，如果是返回true，否则返回false语法：对象1.isPrototypeOf(对象2)；· 示例function Person() {}var p= new Person();console.log(Person.prototype.isPrototypeOf(p));console.log(Person.prototype.isPrototypeOf(Person));4、propertysEnumerable作用：表示属性必须是自己提供的，同时可被枚举的，就返回true，否则返回false语法：对象.propertyIsEnumerable(属性名)；
5、toString、toLocalString、valueOfvar d= new Date();console.log(d.toString());console.log(d.toLocalString());6、Instanceof作用：用于检测构造函数的prototype属性所指向的对象是否存在于被检测对象的原型链上 规律：创建对象以后，没有给其构造函数的prototype属性重新赋值那么就返回true； 创建对象时构造函数prototype属性所指向的对象练习题：JavaScript 面向对象
1、原型的基本概念
对象的原型是什么 __构造函数的prototype属性的值___. 如何获得原型对象: __构造函数.protytype___和 ___Object._proto___. 原型的作用(为什么需要原型): __实现继承___. 如何给原型对象添加成员: 1利用覆盖原型对象添加成员 2利用混入继承
2、继承的概念
自定义构造函数 Foo创建的对象 obj 继承自 _Foo.prototype____.
自定义构造函数 Foo的原型属性 prototype继承自 __Object.prototype___.
如何获得函数 Foo的原型: __Foo.prototype___.
如何获得对象 obj的原型对象: ___obj._proto___.
默写经典继承语法:
3、绘制内存逻辑图1、var arr = [ 1, 2, 3 ];2、var arr1 = [ 1, 2, 3 ]; var arr2 = arr1; arr1 = [ 4, 5, 6 ];3、function Fn() {} var f1 = new Fn();4、function Fn() {} var f1 = new Fn(); Fn.prototype = {};
5、function Fn() {} var f1 = new Fn(); Fn.prototype = {}; var f2 = new Fn();
4、Object对象
如何获得数据的类型: __name、字符串截取、正则表达式___.
Object.prototype 包含哪些常用方法: _isPrototypeOfhasOwnPrertypropertyIsEnumerable____.
hasOwnProperty 方法的语法和含义是什么: ___判断是否是本身提供的属性是返回true语法：_object.hasOwnProperty(属性名).
isPrototypeOf 方法的函数与语法是什么: __判断对象1是不是对象2的原型对象1 inPrototypeOf 对象2___.
propertyIsEnumerable 方法的含义与语法是什么: ___示属性必须是自己提供的，同时可 被枚举的，就返回true，否则返回false语法：对象.propertyIsEnumerable(属性名)；
页:
[1]