JS——面向对象基础
2017-09-17 16:52
155 查看
概念
只关注对象提供的功能,不关注内部细节。JS的面向对象
特点:抽象:捉住核心(获取需要的内容) 封装:只考虑使用功能,不考虑原理 继承:继承父类方法、属性,子类又有自己的特性 1)多重继承(多个父类) 2)多态
对象的组成
方法/函数:
方法:属于一个对象函数:自由的,不属于任何人
过程、动态的
属性 / 变量:
属性:属于一个对象变量:自由的,不属于任何人
状态、静态的
对象添加方法和属性
This
当前的方法属于谁,this就是谁。注意事项
不能在系统内置对象中随意添加方法、属性,否则会覆盖已有方法、属性。Object对象
Object对象,没有功能。所以我们可以往它身上添加方法、属性。
实例:
function createInf( name, age){ //创建(原料) var myObj = new Object(); //添加属性(加工) myObj.name = name; myObj.age = age ; //添加方法(加工) myObj.showName = function(){ alert("我的名字是:" + this.name); }; myObj.showAge = function(){ alert("我的年龄是:" + this.age); }; //记得返回对象出去,才能使用(出厂) return myObj; } //创建实例 var obj1 = createInf("Tim Chen","22"); //调用方法 obj1.showName(); obj1.showAge();
上面的createInf函数,它的作用是构建一个对象,这种函数就被称作构造函数。
工厂方式
上面构造函数的方式,叫做工厂方式。它包含原料、加工、出厂这三个流程。
问题
1. 没有new使用工厂方式的构造函数创建实例时,不能用new关键字创建。
2. 函数重复
每创建一个实例,该实例就会有构造函数设置的相应数量的方法。
浪费系统资源。
解决方法
1. 使用new关键字创建实例我们需要把所有属性、方法的前缀都换成this,
原料、出厂部分不用写。
function createInf( name, age){ //系统偷偷帮我们创建一个对象 //var this = new Object(); //添加属性(加工) this.name = name; this.age = age ; //添加方法(加工) this.showName = function(){ alert("我的名字是:" + this.name); }; this.showAge = function(){ alert("我的年龄是:" + this.age); }; //系统帮我们返回 //return this; } //创建实例 var obj1 = new createInf("Tim Chen","22"); //调用方法 obj1.showName(); obj1.showAge();
2. 函数重复
构造函数里写属(不一样的东西),原型上添加方法(一样的东西)。
类名首字母大写。
实例:
function CreateInf( name, age){ //系统偷偷帮我们创建一个对象 //var this = new Object(); //添加属性(加工) this.name = name; this.age = age ; //系统帮我们返回 //return this; } //往createInf原型上添加方法 CreateInf.prototype.showName = function(){ alert("我的名字是:" + this.name); }; CreateInf.prototypeshowAge = function(){ alert("我的年龄是:" + this.age); }; //创建实例 var obj1 = new CreateInf("Tim Chen","22"); //调用方法 obj1.showName(); obj1.showAge();
原型(prototype)
可以理解为CSS里的class。实例:
var arr1 = new Array(11,12,13,14,15); var arr2 = new Array(21,22,23,24,25); Array.prototype.sum = function(){ // class //arr1.sum = function(){ //行间样式 var result = 0; for(var i = 0; i < this.length; i++){ result += this[i]; } return result; }; alert(arr1.sum()); alert(arr2.sum());
如果只给arr1添加方法,很显然arr2没有sum方法,会报错。
如果arr1、arr2都想要sum方法,那就需要在原型上添加方法。
这就好比行间样式跟class。
类、对象
类: 模版对象: 成品
例如:
var arr = new Array(1,2,3); Array 类 arr 对象
我们只能arr.push( ),而不能Array.push( )。因为类是没有功能的。
而对象,也不能像模板那样
new arr( )生成别的东西。
相关文章推荐
- JS面向对象基础篇(封装 继承 多态)
- 面向对象JS基础讲解,工厂模式、构造函数模式、原型模式、混合模式、动态原型模式
- Js_面向对象基础
- JS面向对象基础
- js面向对象基础拾遗
- JS面向对象基础
- js面向对象基础
- js面向对象基础(进阶)
- JS面向对象基础
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
- JS面向对象基础
- JS面向对象基础2
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
- JS基础继承(面向对象思想)
- JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
- js面向对象基础
- 3-js面向对象基础 原型链进阶
- 4 js面向对象基础 - 预解析,词法作用域,作用域链
- JavaScript基础精华02(函数声明,arguments对象,匿名函数,JS面向对象基础)
- js-面向对象基础