javascript继承方式-JS实现继承的四种形式及其弊端

2023-08-21 0 7,142 百度已收录

JS实现继承方法:(1)通过改变原型指向实现;(二)借用施工方实施的;(3)通过组合形式;(4)以副本的形式实现

(1)通过改变原型指向的形式实现继承,案例代码如下:

    // 父类构造函数
    function Person(name,age,sex) {
      this.name=name;//父类属性
      this.sex=sex;
      this.age=age;
    }
    Person.prototype.eat=function () {//父类共享的方法
      console.log("人可以吃东西");
    };
    Person.prototype.sleep=function () {
      console.log("人在睡觉");
    };
    Person.prototype.play=function () {
      console.log("生活就是不一样的玩法而已");
    };
    function Student(score) {//子类
      this.score=score;
    }
    //改变学生的原型的指向即可==========>学生和人已经发生关系,关键代码
    Student.prototype=new Person("小明",10,"男");
    Student.prototype.study=function () {
      console.log("学习很累很累的哦.");
    };
    //测试是否继承成功的代码
    var stu=new Student(100);//实例化一个对象
    console.log(stu.name);//输出继承于父类中的属性
    console.log(stu.age);
    console.log(stu.sex);
    stu.eat();            //输出继承于父类中的方法
    stu.play();
    stu.sleep();
    console.log("下面的是学生对象中自己有的");
    console.log(stu.score);//输出子类中的属性
    stu.study();           //输出子类中的方法
    

通过更改指向

实现javascript继承方式,它的缺陷:因为属性是在改变原型指向时直接初始化的,所以继承的属性值是相同的,但实际上不可能所有实例化的对象都具有相同的属性值,所以只能重新调用对象的属性来重新参数化,导致代码冗余。

(2)借用构造函数实现,代码如下:

//父类构造函数
function Person(name, age, sex, weight) {
  this.name = name;
  this.age = age;
  this.sex = sex;
  this.weight = weight;
}
Person.prototype.sayHi = function () {
  console.log("您好");
};
//子类构造函数
function Student(name,age,sex,weight,score) {
  //借用构造函数--------关键代码
  Person.call(this,name,age,sex,weight);
  this.score = score;
}
//测试代码
var stu1 = new Student("小明",10,"男","10kg","100");
console.log(stu1.name, stu1.age, stu1.sex, stu1.weight, stu1.score);
var stu2 = new Student("小红",20,"女","20kg","120");
console.log(stu2.name, stu2.age, stu2.sex, stu2.weight, stu2.score);
var stu3 = new Student("小丽",30,"妖","30kg","130");
console.log(stu3.name, stu3.age, stu3.sex, stu3.weight, stu3.score);

继承是通过借用构造函数来实现的:主要使用方式是[构造函数名称.call(当前对象,属性,属性,属性...);

这种方法解决了属性继承,以后可以初始化值,但父类别中的方式不能继承

(3)以组合形式实现,代码如下:

//父类构造函数
function Person(name,age,sex) {
  this.name=name;
  this.age=age;
  this.sex=sex;
}
Person.prototype.sayHi=function () {
  console.log("阿涅哈斯诶呦");
};
//子类构造函数
function Student(name,age,sex,score) {
  //借用构造函数:解决父类属性的继承
  Person.call(this,name,age,sex);
  this.score=score;
}
//改变原型指向----继承,解决父类方法的集成
Student.prototype=new Person();//不传值
Student.prototype.eat=function () {
  console.log("吃东西");
};
//测试代码
var stu=new Student("小黑",20,"男","100分");
console.log(stu.name,stu.age,stu.sex,stu.score);
stu.sayHi();
stu.eat();
var stu2=new Student("小黑黑",200,"男人","1010分");
console.log(stu2.name,stu2.age,stu2.sex,stu2.score);
stu2.sayHi();
stu2.eat();

该方法通过(1)借用构造函数的形式实现属性的继承;(2)通过改变原型指向的形式来实现方法的继承

组合继承:改变原型点的继承+借用构造函数继承

(4)继承是通过复制方法实现的,一个对象中的属性或方法直接复制到另一个对象javascript继承方式,代码如下:

//父类对象
var obj1={
  name:"小糊涂",
  age:20,
  sleep:function () {
    console.log("睡觉了");
  }
};
//子类对象
var obj2={};
//拷贝
for(var key in obj1){
  obj2[key]=obj1[key];
}
//测试
console.log(obj2.name);

复制方法二:

//父类构造函数
function Person() {
}
Person.prototype.age=10;
Person.prototype.sex="男";
Person.prototype.height=100;
Person.prototype.play=function () {
  console.log("玩的好开心");
};
//子类对象
var obj2={};
//Person的构造中有原型prototype,prototype就是一个对象,那么里面,age,sex,height,play都是该对象中的属性或者方法
//拷贝方式
for(var key in Person.prototype){
  obj2[key]=Person.prototype[key];
}
//测试代码
console.dir(obj2);
obj2.play();

用于创建变量的句子模式如下所示:

let 变量名; //声明变量的语法
let name; //声明1个变量,变量的名字叫做name
let age; //声明1个变量,变量的名字叫做age

2) 分配符号

变量之后

创建时javascript命名规则,您可以使用参数符号将数据存储在变量中。

变量名 = 数据;
name = "jack"; //将字符串 "jack" 这个数据存储到 变量 name 中
age = 18; //将数值类型的数据 18 这个数据存储到 变量 age 中

参数符号=,其功能是将一侧的数据存储到左侧的变量中。

3) 变量的使用

在需要使用存储在变量中的数据的地方,只需要直接写入变量的名称即可。特别是,存储在变量中的数据也称为变量的值。

console.log(name);    //想要输出name变量中的值,直接写上变量的名字name
console.log(age);    //想要输出age变量中的值,直接写上变量的名字age

2. 变量的命名规则和规范

1) JavaScript 中变量的命名规则

必须遵循命名规则,否则代码将报告错误并且难以执行

a. 变量名称可以包含字母、数字、美元符号 ($) 或吨符号 (_),

但它们必须以字母、美元符号 ($) 或吨符号 (_) 开头,而不是数字。

注: 不能在变量名称中使用连字符 (-) 或点 (.)。数。

二.不能使用关键字或保留字来命名变量。

2) 命名约定

不合规不会报告错误,它可以被执行javascript命名规则,世界各地的后端程序员都在关注。

a. 变量名称应该是有意义的,当您看到变量名称时,您就知道其中存储了哪种数据。

二.最好使用英语短语,但不能使用拼音。

c. 使用骆驼命名法,一个短语全部大写,多个短语以第二个短语和小写开头。

至此,“JavaScript 变量的命名约定是什么”的研究就结束了,希望能解决大家的烦恼。理论与实践的结合可以更好地帮助你学习,去尝试吧!如果您继续学习更多相关知识,请继续关注Espeed Cloud的网站,小编也会继续努力,为您带来更多实用的文章!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 javascript javascript继承方式-JS实现继承的四种形式及其弊端 https://www.wkzy.net/game/132233.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务