js的封装、继承、多继承、多态

最新推荐文章于 2023-11-29 10:54:47 发布
最新推荐文章于 2023-11-29 10:54:47 发布
阅读量256 收藏 2
点赞数
分类专栏： js设计模式 文章标签： js设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MiemieWan/article/details/97030192
版权

一、封装

1.对象实现封装

var Book = function(id, name) {
			// 私有属性
			var num = 1;

			// 私有方法
			function checkId() {
				console.log('checkId');
			};

			// 特权方法：可访问对象的公有属性和方法，也能访问类或对象的私有属性和方法,不能访问类的公有属性和方法
			this.getName = function() {
				console.log(num);
				console.log(checkId);
				console.log(this.id);
				console.log(this.copy);
				// console.log(this.isChinese);
				// console.log(this.resetTime);
				console.log(this.isJSBook);
				console.log(this.display);
			};

			// 实例公有属性
			this.id = id;

			// 实例公有方法
			this.copy = function() {
				console.log('copy');
			};

			// 构造器：在创建实例时能初始化实例属性的特权方法
			// this.setName(name);

		}
		// 类静态公有属性（实例不能访问）
		Book.isChinese = true;

		// 类静态公有方法（实例不能访问）
		Book.resetTime = function() {
			console.log('resetTime')
		}

		Book.prototype = {
			// 公有属性
			isJSBook: false,

			// 公有方法
			display: function() {
				console.log('display')
			}
		}

		var book = new Book(2,'sjsf');
		book.getName()

2.闭包实现封装

var Book = (function() {
			// 静态私有变量
			var bookNum = 0;

			// 静态私有方法
			function checkBook() {}

			// 创建类
			function book(newId, newName) {
				// 私有变量
				var name, price;

				// 私有方法
				function checkId(id) {};

				// 特权方法
				this.getName = function() {
					console.log('getName');
					console.log(this.id);
					console.log(newName);
				};

				// 公有属性
				this.id = newId;

				// 公有方法
				this.copy = function() {};
			}

			// 构建原型
			book.prototype = {
				// 静态公有属性
				isJSBook: false,

				// 静态公有方法
				display: function() {}
			}

			// 返回类
			return book;

		})();

		Book.isChinese =true;

		var book = new Book(2,'sjsf');
		book.getName()

 

二、继承

new:通过new关键字创建的对象：实质是对新对象this的不断赋值，并将prototype指向类的prototype对象

1.类式继承：

原理：子类原型=父类实例。（父类实例是通过new创建出来的，能获取到父类构造函数中的公有属性和方法，以及父类原型中                的属性和方法）。

功能：继承了父类构造函数中的公有属性和方法，以及父类原型中的属性和方法。

缺点：（1）父类构造函数中的公有属性若是引用类型，会在子类中被所有实例共用（一改全改）

           （2）创建父类时无法向父类传递参数，因此在实例化父类时无法对父类构造函数的属性进行初始化。

function Parent(){
    this.name = 'John';
    this.type = [1,2,3];
}
Parent.prototype.show = function(){
    console.log(123);
}
function Son(){
    this.age = 12;
}
Son.prototype = new Parent();

var son1 = new Son();
var son2 = new Son();
console.log(son1.name); // John
console.log(son1.type); // [1,2,3]
console.log(son2.type); // [1,2,3]
console.log(son1.show); // function(){ console.log(123);}

son1.type.push(4);
console.log(son1.type); // [1,2,3,4]
console.log(son2.type); // [1,2,3,4]

2.构造函数继承

原理：将父类构造函数中的公有属性和公有方法指向子类构造函数（call方法）

功能：继承父类构造函数中的公有属性和公有方法，解决了父类构造函数中的公有属性共用和父类实例化时无法初始化的问题。

缺点：无法继承父类原型中的属性和方法

function Parent(name) {
	this.name = name;
	this.type = [1,2,3];
}
Parent.prototype.show = function() {
	console.log('show');
}
function Son(name) {
	this.age = 12;
	Parent.call(this,name);
}

var son1 = new Son('John');
var son2 = new Son('Amy');

console.log(son1.name); // John
console.log(son1.show);  // undefined 继承不了父类原型中的属性和方法
console.log(son1.type); // [1,2,3]
console.log(son2.type); // [1,2,3]

son1.type.push(4);
console.log(son1.type); // [1,2,3,4]
console.log(son2.type); // [1,2,3]

3.组合继承（结合类式继承和构造函数继承）

原理：子类原型=父类实例，父类构造函数中的公有属性和公有方法指向子类构造函数

功能：继承了父类构造函数中的公有属性和方法，以及父类原型中的属性和方法。

缺点：实行了两次继承了父类构造函数中的公有属性和方法。

function Parent(name) {
	this.name = name;
	this.type = [1,2,3];
}
Parent.prototype.show = function() {
	console.log('show');
}
function Son(name) {
	this.age = 12;
	Parent.call(this,name);
}

Son.prototype = new Parent();

var son1 = new Son('John');
var son2 = new Son('Amy');

console.log(son1.name); // John
console.log(son1.show);  // function show() {console.log('show');}
console.log(son1.type); // [1,2,3]
console.log(son2.type); // [1,2,3]

son1.type.push(4);
console.log(son1.type); // [1,2,3,4]
console.log(son2.type); // [1,2,3]

4.原型式继承（相当于类式继承）

原理：根据一个对象创建另一个对象（子类原型=父类实例）

功能：继承了父类实例中的属性和方法，以及父类原型中的属性和方法。

缺点：（1）父类构造函数中的公有属性若是引用类型，会在子类中被所有实例共用（一改全改）

           （2）创建父类时无法向父类传递参数，因此在实例化父类时无法对父类构造函数的属性进行初始化。

function inheritObj(obj) {
	function Son() {}
	Son.prototype = obj;
	return new Son();
}

var obj = {
	name : '123',
	type : [1,2,3]
}
var son1 = inheritObj(obj);
var son2 = inheritObj(obj);

console.log(son1); //{}
console.log(son1.__proto__); //{name : '123',type : [1,2,3]}

相当于

var son = Object.create(obj);

5.寄生式继承（对原型继承的二次封装，添加自身属性和方法）

原理：根据一个对象创建另一个对象（子类原型=父类实例）

功能：继承了父类实例中的属性和方法，以及父类原型中的属性和方法。

缺点：（1）父类构造函数中的公有属性若是引用类型，会在子类中被所有实例共用（一改全改）

           （2）创建父类时无法向父类传递参数，因此在实例化父类时无法对父类构造函数的属性进行初始化。

function inheritObj(obj) {
	function Son() {}
	Son.prototype = obj;
	return new Son();
}

function Son(obj) {
	var son1 = inheritObj(obj);
	son1.show = function() {
		console.log(show);
	}
	return son1;
}

var obj = {
	name : '123',
	type : [1,2,3]
}
var son1 = new Son(obj);
var son2 = new Son(obj);

console.log(son1); //{show:f}
console.log(son1.__proto__); //{name : '123',type : [1,2,3]}

6.寄生组合式继承

原理：将父类构造函数中的公有属性和公有方法指向子类构造函数（call方法），根据父类实例创建对象（子类原型=父类实例），对象的构造函数指向子类构造函数，子类原型指向对象

功能：继承了父类实例中的属性和方法，以及父类原型中的属性和方法。

function inherit(son,parent) {
	var obj = Object.create(parent.prototype);
	obj.constructor = son;
	son.prototype = obj;
}
function Parent(name) {
	this.name = name;
	this.type = [1,2,3];
}
Parent.prototype.show = function() {
	console.log('show');
}
function Son(name) {
	Parent.call(this,name);
}
inherit(Son,Parent)

var son1 = new Son('John');
console.log(son1); // {name : '123',type : [1,2,3]}
console.log(son1.__proto__); // Parent {constructor: ƒ}

console.log(son1.name); // John
console.log(son1.type); // [1, 2, 3]

三、多继承

由于寄生组合式继承是依赖原型链实现的，但原型链只有一条，不能实现多继承。

多继承原理：将父类实例中的属性和方法复制到子类实例中

var mix = function() {
	var i = 1,
		len = arguments.length,
		target  =arguments[0],
		arg;
	for(; i < len; i++) {
		arg = arguments[i];
		// 遍历父类实例属性
		for(var key in arg) {
			target[key] = arg[key];
		}
	}
	return target;
}

var book1 = {
	name:'jsBook'
}
var book2 = {
	year:14,
	address:'Chinese'
}
var book3 = mix(book1,book2)
console.log(book1); //{name: "jsBook", year: 14, address: "Chinese"}
console.log(book3); //{name: "jsBook", year: 14, address: "Chinese"}

四、多态

 多态:同一个方法，根据参数个数的不同，有多种调用方式

function Add() {
	// 无参数
	function zero() {
		return 10;
	}
	// 1个参数
	function one(num) {
		return 10 + num;
	}
	// 2个参数
	function two(num1, num2) {
		return 10 + num1 + num2;
	}
	this.add = function() {
		var arg = arguments,
			len = arguments.length;
		switch(len) {
			case 0: 
				return zero();
			case 1: 
				return one(arg[0]);
			case 2: 
				return two(arg[0],arg[1]);
		}
	}
}

var test = new Add();
console.log(test.add()); // 10
console.log(test.add(1)); // 11
console.log(test.add(1,2)); // 13

 

MiemieWan
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript中如何实现封装,继承和多态
10-03
javascript中如何实现封装,继承和多态
javascript中的封装多态和继承
weixin_33785108的博客
01-06 105
封装Encapsulation 如下代码,这就算是封装了 (function (windows, undefined) { var i = 0;//相对外部环境来说,这里的i就算是封装了 })(window, undefined);   继承Inheritance (function (windows, undefined) { //父类 ...
面向对象编程之：封装、继承、多态
weixin_30851867的博客
08-02 209
最近在实习公司写代码，被隔壁的哥们吐槽说，代码写的没有一点艺术。为了让我的代码多点艺术，我就重新温故了《javascript高级程序设计》（其中几章），然后又看了《javascript设计模式》，然后觉得要写点心得体会，来整理自己所学的吧。以下是我个人见解，错了请轻喷，欢迎指出错误，乐于改正。 一、封装 （1）封装通俗的说，就是我有一些秘密不想让...
js封装/继承/多态
aihouti2211的博客
02-19 172
2019-2-17 学习内容 1.面向对象的三大特性 封装 所谓封装，也就是把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。封装是面向对象的特征之一，是对象和类概念的主要特性。 简单的说，一个类就是一个封装了数据以及操作这些数据的代码的逻辑实体。在一个对象内部，某些代码或某些数据可以是私有的，不能被外界访问。通过这种方式，对象对...
js 封装，继承，多态概念（面试）
PrimaryColor
12-12 1047
封装：封装：就是把事物封装成类，，隐藏事物的属性和方法的实现细节，仅对外公开接口。 继承： 多态：
JavaScript 继承 封装 多态实现及原理详解
10-16
主要介绍了JavaScript 继承 封装 多态实现及原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JavaScript使用prototype原型实现的封装继承多态示例
10-18
主要介绍了JavaScript使用prototype原型实现的封装继承多态,涉及javascript prototype与面向对象程序设计相关操作技巧,需要的朋友可以参考下
JavaScript实现多态和继承的封装操作示例
10-18
主要介绍了JavaScript实现多态和继承的封装操作,结合实例形式分析了javascript中多态与继承的实现及封装相关操作技巧,需要的朋友可以参考下
Js三大特性--封装、继承以及多态
热门推荐
sunshine的博客
08-17 1万+
要分享Js一些基础理论知识，但是在项目中却十分实用。回想之前一次令人心碎的面试，等了将近50分钟，可是面试却不到10分钟，我的心里受到成吨的打击与伤害，以前一直不注重扎实基础，当面试官坐下的那一刻我就感到气氛不对，首先介绍自己软件工程毕业…….然后面试官说介绍一下软件的几大特性……..我…..我说不出话，然后跳过，让我介绍一下闭包、原型、js三大特性，以及在项目中的运用……我的天……当时脑海里浮现......
js类三大属性，封装、继承、多态
weixin_44706621的博客
10-13 583
js继承、封装、多态 构造函数： 在java语言中类的定义中都有构造函数，在js中也有构造函数的概念，Object对象都有constructor构造函数方法； js中Object对象都有以下属性和方法： 1、constructor：构造函数属性，它指向了Object()函数； 2、hasOwnProperty：判断是否是对象自身属性和方法； 3、isPrototypeOf：判断是否是某个对象的子对象即继承某对象； 封装 首先，我们先了解一下什么是Js封装，就是当你需要隐藏一些属性和方法是，就可以将这些属性
javascript中如何实现封装,继承和多态,并有详细
10-31
javascript中如何实现封装,继承和多态,并有详细,我天天在传谢谢
封装继承多态
weixin_38400347的博客
03-23 2024
首页 封装 将方法和属性封装到一个对象中，对外提供方法用于改变该对象的属性值。 public class Person { private String name; private Integer age; public String getName() { return name; } public void setName(String name) { this.name = name; } public In
js设计模式封装 继承 多态
u010674395的专栏
10-27 160
创建一个类，可在类内部通过this增加属性和方法，也可通过原型增加，如下 var Book = function(id, bookname, price) { this.id = id; this.bookname = bookname; this.price = price; } Book.prototype.display = function() { //...
JavaScript 之封装、继承、多态
Mr_Zhang2的博客
04-01 246
面向对象编程
JS- 封装、继承、多态
web前端体验专栏
05-28 761
1 function myfun1(){ 2 //这是私有属性 3 var private1 = “这是私有属性”; 4 var privateMethod = function(){ 5 alert(private1); 6 } 7 //这是实例属性 8 this.publicvar = “这是实例属性”;
JS核心之封装继承多态(一)
技术圈
07-22 691
简介 封装，继承和多态是面向对象编程的三步，面向对象编程，即先将数据封装在对象中，然后按需使用对象中的成员。 封装 创建一个对象，集中保存一个事物的属性和功能，为后续数据的使用做准备，封装有利于大量数据的维护和使用。 创建对象 简单创建：{} var 对象名 = { 属性名1: 值2, 属性名2: 值2, ...: ... 方法名1: function(){ } ...: ... } 仿数组创建：new 构建空对象：var 对象名 = new Object; 添加新属性：obj.
JS面向对象基础篇（封装 继承 多态）
洛小宇博客
11-08 479
JS面向对象基础篇（封装 继承 多态） 首先我们要创建一个对象，我们可以利用javascript的语法特征，以类的思想来创建对象 一:封装 （1）原始方法，代码如下 var obj=new Object(); obj.name='Tom'; //给对象添加属性 obj.sex=22; obj.showName=function(){
JavaScript的封装、继承和多态
最新发布
m0_57996540的博客
11-29 166
JavaScript中，封装、继承和多态是
(1分)在JavaScript中，下列哪个是闭包的优点？A、可以实现数据的封装和保护 B、可以实现对象的继承和多态 C、可以提高程序的执行效率 D、可以减少代码的复杂性
06-08
答案是 A、可以实现数据的封装和保护。闭包是指在一个函数内部创建另一个函数，并返回这个函数的引用。由于内部函数可以访问外部函数的变量和参数，...闭包也可以用来实现对象的继承和多态，但这并不是它的主要优点。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值