Javascript ES5里实现类

//1.function 实现类(最简单的类)

 

function Person(){

 

    this.name = "张三";

    this.age = 12;

 

}

 

var p1 = new Person();

console.log(p1.name);

 

//2.构造函数和原型链

function Person1(){

 

    this.name = "张三";

    this.age = 12;

 

    this.run=function(){

 

        console.log(this.name + " is running");

    };

 

}

 

var p1 = new Person1();

p1.run();

 

//原型链上的属性和方法会被多个实例共享,构造函数不会

Person1.prototype.sex = "man";      //原型链上定义属性

Person1.prototype.work = function(){//原型链上定义方法

 

    console.log(this.name + "is working");

 

}

 

var p2 = new Person1();

console.log(p2.sex);

p2.work();

console.log(p1.sex);

p1.work();


 

//3.类里的静态方法,即 类方法

Person1.getInfo=function(){

 

    console.log("静态方法,类方法");

}

 

//4.类中的继承,原型链 和对象冒充

function Person2(){

 

    this.name = "张三";

    this.age = 12;

 

    this.run=function(){

 

        console.log(this.name + " is running");

    };

 

}

//对象冒充继承,可以继承构造函数 里的属性和方法,不能继承 原型链上的属性和方法

function Student(){

 

    Person1.call(this);

 

}

 

var student1 = new Student();

student1.run();

 

//原型链上的继承和方法不能继承

//student1.work();  

console.log(student1.sex);

 

//5. 原型链继承,子类即可以继承构造函数属性,也可以继承原型链上的属性和方法

function Student1(){

 

}

Student1.prototype = new Person1();

 

console.log("--------原型链继承-----------");

var student2 = new Student1();

student2.run();

student2.work();  

console.log(student2.sex);

 

//6.原型链上继承的问题,不能给父类传参数

function Animal(name,age){

 

    this.name = name;

    this.age = age;

 

    this.say=function(){

        console.log(this.name + " 在叫~");

    }

}

 

function Cat(name,age){

 

}

 

Cat.prototype = new Animal();

 

var cat1 = new Cat("苗苗",2);

cat1.say();// Cat里的实际参数不能传给Animal

 

//7.结合冒充继承(构造函数)和原型链继承来实现传参

 

function Dog(name,age){

 

    Animal.call(this,name,age);

}

 

//构造函数继承 都可以实现传参

Dog.prototype = new Animal();

//原型链继承

//Dog.prototype = Animal.prototype;

 

console.log("------构造函数结合原型链继承--------")

var dog1 = new Dog("旺财",3);

dog1.say();



 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将ES6语法的class转换成ES5的语法,可以使用Babel工具进行转换。Babel是一个广泛使用的JavaScript编译器,可以将ES6代码转换为ES5兼容的代码。通过配置Babel的插件和预设,可以实现将ES6的class语法转换为ES5的语法。 首先,你需要在项目中安装Babel的相关依赖包。然后,创建一个配置文件(通常是.babelrc文件)来指定转换的规则。在配置文件中,你可以使用一系列的插件和预设来实现特定代码的转换。 例如,你可以使用@babel/preset-env预设来根据目标环境自动转换ES6代码为ES5代码。这个预设会根据你指定的目标浏览器或Node.js版本,自动选择需要的转换规则。 另外,你还可以使用@babel/plugin-proposal-class-properties插件来转换ES6 class中的属性定义,以及@babel/plugin-proposal-private-methods插件来转换ES6 class中的私有方法定义。 通过配置Babel的插件和预设,你可以根据具体需要将ES6语法的class转换成ES5的语法。这样,你就可以在不兼容ES6的环境中使用ES6的class语法了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [js-es6-class转es5源码解析](https://blog.csdn.net/junjiahuang/article/details/126724411)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [详解如何用babel转换es6的class语法](https://download.csdn.net/download/weixin_38690508/13664398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值