JavaScript面向对象中的封装和继承你了解吗

更新时间：2022年02月11日 14:57:05 作者：执手天涯@

这篇文章主要为大家详细介绍了JavaScript面向对象中的封装和继承，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

1、面向对象

【三大显著特征】： 封装、继承、多态

1、封装

【解释】： 封装的本质就是将有关联的代码组合在一起。

【优势】：

保证代码可以复用提高代码的维护效率

【以前的封装方法】：

函数封装

function fn(){}

命名空间封装

let o={
name:'zhangsan',
age:20
}
let obj={
name:'lisi',
age:18
}

【新的封装方法】：

构造函数

//自定义构造函数
function Person(name,age,height,weight){
	this.name=name;
	this.age=age;
	this.height=height;
	this.weight=weight;
	//方法
	this.eat=function(){
	console.log('吃饭')
	}
	this.sleep=function(){
	console.log('睡觉')
	}
}
//实例化一个对象
let obj1=new Person('zhangsan',20,'198cm','60kg')
console.log(obj1)
let obj2=new Person('lisi',24,'168cm','70kg')
console.log(obj2)

【总结】：

构造函数体现了面向对象的封装特性构造函数实例创建的对象彼此独立、互不影响命名空间式的封装无法保证数据的独立性

2、原型对象

【解释】： 本质是构造函数的一个属性，prototype 的是对象类据类型，称为构造函数的原型对象。

【代码示例】：

function Person(name,age){
    this.name=name
    this.age=age
    //this.sing=function (){
	//console.log('唱歌')
	//}
}
console.log(Person.prototype);
Person.prototype.sing=function(){
console.log('唱歌')
}
let p1=new Person('zhangsan',20);
console.log(p1)
p1.sing()

【总结】：

只要是构造函数就有原型对象
原型对象中的方法，实例对象可以直接调用
原型对象和构造函数都有相同的方法的时候就使用构造函数本身的方法

【constructor属性】： 代表了该原型对象对应的构造函数。

【示例】：

function Person(name,age){
	this.name=name
	this.age=age
}
console.log(Person.prototype,constructor)

【图解】：

请添加图片描述

【__proto__属性】： 用于指向原型对象

【示例】：

function Person(name,age){
	this.name=name
	this,age=age
}
Person.prototype.eat=function(){
	console.log('吃饭')
}
let person1=new Person('张三'，22);
console.log(person.__proto__===Person.prototype)

3、继承

【封装问题引出】：

// 封装中国人的行为特征
  function Chinese() {
    // 中国人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;
    this.skin = 'yellow';
    this.language = '中文';
    // 中国人的行为
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }
  // 封装日本人的行为特征
  function Japanese() {
    // 日本人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;
    this.skin = 'yellow';
    this.language = '日文';
    // 日本人的行为
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }

【总结】：其实我们都知道无论是中国人、日本人还是其它民族，人们的大部分特征是一致的，然而体现在代码中时人的相同的行为特征被重复编写了多次，代码显得十分冗余，我们可以将重复的代码抽离出来

【代码改写】：

<script>
  // 所有人
  function Person() {
    // 人的特征
    this.arms = 2;
    this.legs = 2;
    this.eyes = 2;
    // 人的行为
    this.walk = function () {}
    this.sing = function () {}
    this.sleep = function () {}
  }
  // 封装中国人的行为特征
  function Chinese() {
    // 中国人的特征
    this.skin = 'yellow';
    this.language = '中文';
  }
  // 封装日本人的行为特征
  function Japanese() {
    // 日本人的特征
    this.skin = 'yellow';
    this.language = '日文';
  }
  // human 是构造函数 Person 的实例
  let human = new Person();
  // 中国人
  Chinese.prototype = new Person();
  Chinese.prototype.constructor = Chinese;
  // 日本人
  Japanese.prototype = human;
  Japanese.prototype.constructor = Japanese;

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

深入了解js原型模式
在js中，创建对象的方式有工厂模式和构造函数模式等,但是，构造函数中的每个方法都需要在实例对象中重新创建一遍，不能复用，就需要使用原型模式来创建对象。下面我们来了解一下吧
2019-05-05
javascript作用域和闭包使用详解
这篇文章主要介绍了javascript作用域和闭包使用详解,需要的朋友可以参考下
2014-04-04
TypeScript开发环境安装
这篇文章介绍了TypeScript开发环境的安装方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
js的hasownproperty使用示例
我们在js中可能经常会用到for in来遍历对象中的属性，当然for in中得到的属性，只能是可枚举的属性，for in的时候，它会把对象的属性(包括原型的属性)遍历一遍，看面看示例就明白了
2014-03-03
javascript设计模式之迭代器模式
这篇文章主要为大家介绍了javascript迭代器模式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
Javascript对象字面量的理解
这篇文章主要介绍对Javascript对象字面量的理解,通俗易懂,需要的朋友可以参考下。
2016-06-06
Javascript中的关键字和保留字整理
ECMA-262中描述了一组具有特定用途的关键字，关键字属于语言保留，不可以用于标示符，学习js的朋友可以看看
2014-10-10
uniapp返回上一页执行上一页方法解决方案
这篇文章主要给大家介绍了关于uniapp返回上一页执行上一页方法解决方案,在UniApp中可以通过uni.navigateBack()方法返回上一个页面,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-08-08
做web开发先学JavaScript
当你正在寻找 web 开发的工作时，我认为 JavaScript 是可以起步的伟大语言，他进入门槛低、跨平台、已经成熟而且是个很好的跳板。
2014-12-12
JavaScript中的关键字"VAR"使用详解分享
JScript的语法教程里面说在声明变量时忽略var关键字是完全合法的。但是事实常常又证明想当然的结果是不可靠的。
2013-07-07