//******************************************************************************
//创建类的多种方式
//------------------------------------------------------------------------------
//1.这种创建模式类似于c#中的静态类,不能创建实例,成员都是属于类的.在全局中只有一个.
var class1= {
item1:'item1.value',
item2:'item2,value',
func1:function(){
console.log('我是在创建类时就创建的方法');
}
}
//这种类不能直接使用prototype属性去添加类成员,且class1的__proto__(原型对象:这个东西
//暂时不做解释,会在下面的继承中解释)是Object对象
//因为Object对象是一个基对象,不存在父级,所以这个方法没法去添加修改
//class_name.prototype.method_name = function(first_argument) {
// body...
//};
//如果这个类再添加属性的话,可以直接编写类方法
class1.func2 = function() {
// body...
console.log('我是创建类后扩充的方法');
};
//------------------------------------------------------------------------------
//2.构造函数创建类的形式.也可以直接写成 function class2(i1,i2).这样创建类的方式就
// 相当于创建了一个非静态的类,需要使用 new 关键字来实例,如果不用 new关键字实例,
// 则里面的this则为父级this,可能就会成为window对象
function class2(i1,i2){
this.item1=i1;
this.item2=i2;
this.fun1=function(){
console.log('我是在创建类时就创建的方法');
}
}
//添加静态方法的形式,使用这种方式添加的类成员在 new 出的对象中是不存在的,其实就相
//当于重新创建了一个重名的class2的静态类,当然如果使用 new 关键字去创建,则相当于创
//建了一个新的class2.func2对象
class2.func2 = function(i1,i2)
{
this.item1=i1;//如果使用的是class2.func2()的调用形式,这这里的this指的是class2这个静态类
this.item2=i2;//如果使用的是fun2 = new class2.func2(); 那么这里的this指的是fun2这个对象,
console.log('我是创建类后扩充的方法:直接使用[类名.属性=function]方式创建的');
}
//这种方式是在创建的对象中去添加方法的扩展形式,这些方法被扩展在创建的对象中的__proto__ (原型对象)
//属性中,当然创建的对象也可以直接使用这个方法.这个里面的this依然指向创建的对象
class2.prototype.func2 = function(i1,i2) {
// body...
this.item1=i1;
this.item2 = i2;
console.log('我是创建类后扩充的方法:使用prototype属性扩充的方法');
};
//--------------------------------------------------------------------------------
//3.使用new Object()创建对象,这种创建对象的形式和第一种类似,一样是一个静态的方法
// 这种方式在使用过程中,类中定义的成员在编写的时候可能不在一起,结构不太清晰.(个人不太推荐使用这种方式扩展)
var class3 = new Object();
class3.item1='123';
class3.item2='345';
class3.func1=function(){
console.log('我是在创建类时就创建的方法');
}
//这个地方就不在做解释为什么不可以了,详情可以去看一下案例1
//class3.prototype.func2 = function(i1,i2) {
// this.item1=i1;
// this.item2 = i2;
// console.log('我是创建类后扩充的方法:使用prototype属性扩充的方法');
//};
//---------------------------------------------------------------------------------
//4.使用构造函数方法去创建对象,这种创建形式是不需要new的,但是这种形式创建的类也是没
// 较好的方法去扩展的,其实这个对象并不是class4,而是的到的一个object对象.
// 如果不做继承的情况下可以使用这个方式,(个人不太推荐这种使用方式,扩展性过差)
function class4(i1,i2)
{
var o =new Object();
o.item1=i1;
o.item2=i2;
o.func1=function(){
console.log('我是在创建类时就创建的方法');
}
return o;
}
//----------------------------------------------------------------------------------
//**********************************************************************************
//类的继承
//个人心得:
// 在js中没有过于明确的继承写法.继承写法页多种多样.网上一搜一大堆.在这里我在
// 写出的案例中主要是应用了__proto__(原型对象),和call()添加静态方法
//个人解释:
// __proto__[原型对象]:
// 这个对象其实是指向这个对象到底都是什么,我们如果打开调试工具去查看这个对象,会发现这个对象有可能还有一个__proto__属性
// 但是我们按照层级去一级一级的找下去,发现最后一层必然是Object对象,然而Object是没有__proto__属性的,这也就是说为什么在上
// 面的静态类是没有办法使用prototype属性去扩展的原因.prototype其实是把方法添加到了他的上一层的对象中.当然也可以在当前对
// 象中使用.这也就是说为什么在我的继承方式中会用到prototype属性去设置对象的__proto__
// call()[这个方法是用于改变this指向的]:
// obj.call(this[,paras]);这个方法是用于改变this的指向,意思是在obj方法在调用的过程中改变其中的this对象.当然我们也可以在call方法调用的时候传递参数.传递时在this后面追加.
// 下面我们会举例说明call方法的作用
//----------------------------------------------------------------------------------
//1.call()方法作用
var i1=10,i2=10;//创建两个变量,这两个变量是属于window的,我们全局的this其实就是window
function test()
{
console.log('i1+i2='+(this.i1+this.i2));//我们输出,i1与i2的和;这里要记得写 this.i1 不要直接写 i1.因为 call方法只是改变this,单纯的写i1指的还是window下的i1
}
test();//先执行一次,看下输出结果
var obj ={i1:20,i2:20};
test.call(obj);//这时候我们使用call方法,这个方法中我们传入一个对象,这个对象中有i1和i2两个属性值为20,看一下输出结果为40
//解释:在第一次执行的时候test方法中的 this 是 window对象,在使用 call方法后,test中的this 变化成了 obj对象
//-----------------------------------------------------------------------------------
//2.类的继承正题
/*
父级类:包含属性有名称/长度/高度/体重
*/
function Animal(){
this.name='';
this.length = 0;
this.height = 0;
this.weight = 0;
this.hello=function(){
console.log("我是"+this.name+'...');
}
}
/*
子类:包含游泳方法/并且重写父级的hello方法
*/
function Duck(){
//for(var item in this.__proto__)
//{
// eval('this.'+item+'= this.__proto__[item]');
// console.log(item);
//};
var base = this.__proto__ = new Animal();//注解1
Animal.call(this);//注解2
this.hello=function(){
console.log("我是"+this.name+",我是一只小鸭子.");
base.hello.call(this);//注解3
}
this.swim =function(){
console.log('我在游泳')
}
}
//[注解]
//1:把duck对象的原型对象设置为一个新的Animal对象,并且存到base变量中,用于让子集重写父级方法时调用父级方法使用.
//2:把当前的duck对象的this 放入 Animal方法中去执行,这样的话 duck中的this 就可以被附上Animal类中同样的成员从而实现继承
//3:因为base里面存放的是一个Animal对象,这样的话如果直接执行base.hello的话,base的this是Animal.
// 然而我们现在并不是想输出Animal对象的name属性,而是输出duck对象的name属性,所以这个地方用call方法替换base.hello的this为duck对象
//--------------------------------------------------------------------------------------
//3.继承中的方法扩展测试
Duck.prototype.getWeight=function(){
console.log(this.weight);
}
//说明:如果按照上面的继承方式,Duck的__proto__对象被改变为了Animal,所以在此之前使用prototype向__proto__中添加的方法就被覆盖了.
// 所以就没有办法添加到Duck类中了.如果想通过prototype属性添加方法的情况下,则需要把Duck方法中的注释去除,执行遍历语句.
// 先把扩展方法添加到this对象中,然后再去替换__proto__对象中的内容
//建议:
// 这里就建议在创建类的时候直接把里面的属性方法创建完全,尽量不要使用prototype这种方式去扩充成员.
// 因为这种形式是在当前对象的__proto__(原型对象)中去添加的.

javascript对象创建及继承的更多相关文章

  1. JavaScript对象创建,继承

    创建对象 在JS中创建对象有很多方式,第一种: var obj = new Object(); 第二种方式: var obj1 = {};//对象直面量 第三种方式:工厂模式 function Per ...

  2. javascript中的对象创建与继承

    js是一门基于原型的面向对象语言,与传统的面向对象如Java,C#相比,它在对象创建及继承上有自己独特的实现方式,本文主要描述js中对象创建及继承的一些实践. 1.对象创建 方式一:工厂模式创建对象 ...

  3. web前端学习(二) javascript对象和原型继承

    目录 1. JavaScrpt对象 2. 原型对象和继承 3. 对象的克隆 (1)javascript对象 在JS中,对象是属性的容器.对于单个对象来说,都由属性名和属性值构成:其中属性名需要是标识符 ...

  4. JavaScript 对象创建

    tips: JavaScript 除了null和undefined之外,其他变量都可以当做对象使用. JavaScript 的基本数据类型有:number boolean string null  u ...

  5. js中的对象创建与继承

    对象创建 1.工厂模式 优点:解决了创建多个相似对象的问题 缺点:没有解决对象识别问题:每一个对象都有一套自己的函数,浪费资源 function createPerson(name, age, job ...

  6. 【JavaScript学习】JavaScript对象创建

    1.最简单的方法,创建一个对象,然后添加属性 var person = new Object(); person.age = 23; person.name = "David"; ...

  7. 深入JavaScript对象创建的细节

    最近深入学习javascript后,有个体会:面向对象的方式编程才是高效灵活的编程,也是现在唯一可以让代码更加健壮的编程方式.如果我们抛开那些玄乎的抽象出类等等思想,我自己对面向对象的从写程序的角度理 ...

  8. JavaScript对象创建的几种方式

    1 工厂模式 1.1 创建 function createFruit(name,colors) { var o = new Object(); o.name = name; o.colors = co ...

  9. Javascript 对象创建多种方式 原型链

    一.对象创建 1.new Object 方式 直接赋上属性和方法 var obj = new Object(); obj.name = '娃娃'; obj.showName = function(){ ...

随机推荐

  1. 解释查询和本地查询 区分 Enumerable 和 Queryable

    https://www.cnblogs.com/gosky/p/5757575.html 简单介绍:Enumerable 和 Queryable 他们都是静态类,位于命名控件 System.Linq下 ...

  2. angular2项目打包部署的坑

    1.ng项目打包后,打开index.html,发现页面是空白的,F12查看,发现js和css引入的路径不对 这里要将package.json文件的打包命令改成 ng build --prod --ba ...

  3. Ubuntu16.04 anaconda3 opencv3.1.0 安装CPU版本caffe

    安装anaconda3 安装opencv3.1.0 安装依赖库 修改Makefile.config 修改Makefile 编译报错,卸载anaconda中的protobuffer: conda uni ...

  4. InkWell容器 和 官方自带日期组件 和第三方 日期格式转换组件

    带点击事件的容器 InkWell( child: Text('时间'), onTap: _showTimePicker,),   Flutter 日期和时间戳 日期转化成时间戳: var now = ...

  5. .net C# Chart控件的简单使用

    1.拖控件Chart 到界面 2. 清除默认的序列  chart1.Series.Clear();   3.生成一个序列,并添加到chart1中,序列可添加多个  Series s1 = new Se ...

  6. 【音乐欣赏】《PANTA RHEI》 - MYTH & ROID

    曲名:PANTA RHEI 作者:MYTH & ROID [ti:PANTA RHEI (<异世界超能魔术师>TV动画片头曲)] [ar:MYTH & ROID] [al: ...

  7. SpringMVC注解@RequestMapping全面解析

    @RequestMapping 可以出现在类级别上,也可以出现在方法上.如果出现在类级别上,那请求的 url 为 类级别上的@RequestMapping + 方法级别上的 @RequestMappi ...

  8. GitBook的账号注册和安装使用(一)

    1.GitBook账号注册 GitBook原注册地址  https://legacy.gitbook.com/join 改为: https://www.gitbook.com/ (1)注册账号:htt ...

  9. 创业学习---《调研黑客上:锁定调研目标》--D-2.调研模块---HHR计划---以太一堂

    第一,开始学习: 思考题: (1)你的项目有哪些值得关注的竞争对手?为什么是这些,你是如何分类的? (2)拿出其中一个产品,你会怎么分析他? 第一,<明确调研目标>(补充) 1,调研4大类 ...

  10. CDH搭建大数据集群(5.10.0)

    纠结了好久,还是花钱了3个4核8G的阿里云主机,且行且珍惜,想必手动搭建过Hadoop集群的完全分布式.HBase的完全分布式的你(当然包括我,哈哈),一定会抱怨如此多的配置,而此时CDH正是解决我们 ...