Javascript中的面向对象

最新推荐文章于 2023-11-14 15:18:52 发布
最新推荐文章于 2023-11-14 15:18:52 发布
阅读量180 收藏
点赞数
分类专栏： 前端 文章标签： js 类 封装 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18404993/article/details/104591501
版权

文章目录

1.概述

面向对象：对代码的一种抽象，对外统一提供调用接口的编程思想。

2.名词解释

属性：事物的特性
方法：事物的功能
对象：事物的一个实例
原型：JS函数中有prototype属性引用了一个对象，即原型对象（原型），每个函数都有prototype属性，prototype属性所引用的值也是一个对象（Object），它的作用是定义所有对象实例所共享的属性和方法。prototype，对于构造函数来说，它是一个属性；对于对象实例来说，它是一个原型对象。
使用prototype：

function Person(name,height){
this.name=name;
this.height=height;
}
Person.prototype.hobby=function(){
return 'watching movies';
}
var boy=new Person('keith',180);
var girl=new Person('rascal',153);
console.log(boy.name); //'keith'
console.log(girl.name); //'rascal'
console.log(boy.hobby===girl.hobby); //true

此时，若改变prototype上hobby方法的内容，所有Person对象的实例中hobby方法都会跟着改变，除非该对象显式地重新定义了该方法。（优先查找实例方法，若不存在则查找原型对象上的方法。）

不使用prototype：

function Person(name,height){
 this.name=name;
 this.height=height;
 this.hobby=function(){
 return 'watching movies';
}
 }
var boy=new Person('keith',180);
 var girl=new Person('rascal',153);
 console.log(boy.name); //'keith'
 console.log(girl.name); //'rascal'
 console.log(boy.hobby===girl.hobby); //false
闭包：

闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数）。闭包的本质就是在一个函数内部创建另一个函数。
全局变量可以在函数内部直接访问，而不需要通过传参访问。但反过来，在外层作用域下无法获取内层作用域下的变量，同样在不同的函数作用域中也是不能相互访问彼此变量的。想在一个函数内部也有限权访问另一个函数内部的变量，就要用到闭包。
闭包的3个特性：
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收

函数作为返回值：
例1：

function a(){
	var name = 'zijeak';
	return function(){
		return name;
	};
}
b = a();
b();

打印结果为：zijeak
例2：

function a(){
	var i=0;
	function b(){
		alert(++i);
	}
	return b;
}
var c = a();
c();

打印结果为1
例3：

function fn(){
	var num = 3;
	return function(){
		var n = 0;
		console.log(++n);
		console.log(++num);
	}
}
var fn1 = fn();
fn1();// 1 4
fn1();// 1 5

匿名函数作为返回值，在fn函数调用后返回给fn1，但因为匿名函数内部引用了num，导致其不能随fn调用的结束而销毁，因此num会一直保留在内存中，可以被访问。
闭包的优缺点：
好处
①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
③匿名自执行函数可以减少内存消耗
坏处
①被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响

3.声明对象

3.1 JS字面式声明对象

var person = {
	name:'Zhangsan',
	age:26,
	sex:"male",

	eat:function(food){
		alert(this.name+" is eating "+food);
	}
}
person.eat("shit");

3.2 new操作符

person = new Object();
person.name = 'Zhangsan';
person.age = 26;
person.eat = function(food){
	alert(this.name+" is eating "+food);
}

person.eat("apple");

添加构造函数之后：

function Person(name,sex,age){
	this.name = name;
	this.sex = sex;
	this.age = age;
	this.eat = function(food){
		alert(this.name+" is eating "+food);
	}
}
var person = new Person('Zhangsan',26,'male');
person.eat('banana');

3.3 JS中工厂方式声明对象

function createPerson(name,sex,age){
	var person = new Object();
	person.name = name;
	person.sex = sex;
	person.age = age;
	person.eat = function(food){
		alert(this.name+" is eating "+food);
	}
	return person;
}
var person = createPerson('Zhangsan',26,'male');
person.eat('Pear');

3.4 JS中原型模式声明对象

原型模式的根本：函数本身声明为空内容，利用prototype定义一些属性及方法。
好处：让所有实例化的对象都拥有它包含的属性及方法。

定义方式一：

function test(){
}
test.prototype.color = 'red';
test.prototype.height = '1.7';
test.prototype.width = '1.2';
test.prototype.showInfo = function(){
	alert(this.color+"---"+this.height+"---"+this.width);
}
var car = new test();
car.showInfo();

定义方式二：JSON数据定义属性和方法

function test(){
	
}
test.prototype={
	color:'red',
	height:'1.7',
	width:'1.2',
	showInfo:function(){
		alert(this.color+"---"+this.height+"---"+this.width);
	}
}
var car = new test();
car.showInfo();

3.5 JS中混合模式声明对象

function test(color,height,width){
	this.color = color;
	this.height = height;
	this.width = width;
}
test.prototype={
	showInfo:function(){
		alert(this.color+"---"+this.height+"---"+this.width);
	}
}
var car = new test('red','1.7','1.2');
car.showInfo();

4.遍历对象的属性

对象可以当做数组处理，使用for-in循环遍历

//声明
function test(color,height,width){
	this.color = color;
	this.height = height;
	this.width = width;
}
test.prototype={
	showInfo:function(){
		alert(this.color+"---"+this.height+"---"+this.width);
	}
}
var car = new test('red','1.7','1.2');
//遍历
for(var i in car){
	console.log(i);//取属性或方法的名称
	console.log(car[i]);//取属性的值或方法的代码
}

在这里插入图片描述
对象在内存中的分布
索引（地址）存在栈内存
属性和方法名存在堆内存
方法体存在代码段

5.封装

封装（Encapsulation）：把对象内部数据和操作细节进行隐藏。Javascript可以通过闭包实现封装。

function demo(){
	var num = 1;
	function get_num(){//特权方法
		return num;
	}
	return get_num;
}
var use_demo = demo();
alert(use_demo());

function demo(){
	function _num(){
		alert("num");
	}
	this.num = function(){
		return _num;
	}
}
var use_demo = new demo();
var a = use_demo.num();
a();
use_demo._num();//错误

6.原型和原型链

原型：是利用prototype添加属性和方法
原型链：JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。

var person = function(){};
var p = new person();

第一步：var p={} 创建对象
第二步：p.__proto__ = person.prototype
第三步：创建对象（初始化对象）p person.call(p)

例如：

var person = function(){}
person.prototype.say=function(){
	alert("天气挺好");
}
var p = new person();
p.say();

这里的p没有say方法，因此会在p.__proto__中查找，而p.__proto__ = person.prototype，person.prototype有say方法。
这就说明了，函数对象内有一个隐含属性__proto__，其指向创建该对象的函数对象的原型对象prototype

var person = function(){};
person.prototype.say = function(){
	alert("天气挺好");
}
person.prototype.gongzi = 500;

var programmer = function(){};
programmer.prototype = new person();
programmer.prototype.wcd = function(){
	alert("明天天气也不错");
}
programmer.prototype.gongzi=1000;


var p = new programmer();
//p.say(); //可以调用
//p.wcd();
alert(p.gongzi);
// var p = new programmer();  p.__proto__ = programmer.prototype   = new person();
//var p1 = new person();   programmer.prototype = p1
// p.say(); p.__proto__ --> programmer.prototype ==p1 --->p1.__proto__  ==person.prototype.say();
//原型链实现过程 ***
继承

JS中的继承实质上是利用原型链，在实例化子类对象时使用父类构造方法进行实例化。

  //父类
   function person(name,age){
    this.name = name;
    this.age  = age;
   }
   person.prototype.sayHello = function(){
    alert("hello");
   }
    //子类
   function student(){};
   student.prototype = new person('zijeak',20);
   student.prototype.grade = 3;
   student.prototype.test = function(){
    alert(this.grade);
   }

   var s = new student();
   s.sayHello();
构造继承

在子类内部构造父类的对象实现继承
在这里插入图片描述

使用call和apply继承

call：调动一个对象的一个方法，以另一个对象替换当前对象。
apply：应用某一对象的一个方法，用另一个对象替换当前对象。
在这里插入图片描述

7.关键词

instanceof：判断一个变量是否是一个对象的实例

var arr = new Array();
alert(arr instanceof Array);

delete：用于删除对象的属性，不能用于删除方法

delete obj.name;

call和apply：用于用来重定义 this 这个对象。
在这里插入图片描述
在这里插入图片描述

callee：返回正在执行的function对象，callee是agruments的一个属性。callee实际上指代函数本身，内容为函数内容。
如果当做属性调用，返回函数内容：arguments.callee
如果当做函数调用，意为在函数内部再次调用本函数，若无退出条件，会发生死循环：arguments.callee()
arguments：js中每个函数都有一个Arguments对象的实例，引用函数的参数（实参），可以用数组下标的方式引用arguments元素，它有length属性，callee属性引用函数自身。

this：
this可以在函数内部定义属性/变量（定义出来的是全局变量）
this作为方法调用，构造函数内部this指向当前对象。

function test(){
	this.name="zs";
}

this是call、apply的第一个参数

8.对象冒充

将父类的属性和方法一起传给子类作为特权属性和特权方法
在这里插入图片描述

Zijeak
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS面向对象
LYM0411的博客
06-02 1222
js对象及面向对象
JavaScript 面向对象详解
qq_36081714的博客
08-09 4639
JavaScript面向对象
JavaScript面向对象编程详解
m0_75198698的博客
04-24 1417
面向对象编程（Object-oriented programming，简称 OOP）是一种基于对象和类的编程范式，它将数据和操作数据的函数封装在一起，形成一个独立的对象，并允许对象之间通过继承、接口等方式相互联系和交互。在 JavaScript 中，每个对象都有一个原型对象，它定义了该对象的基本属性和方法，而对象之间的继承关系通过原型链来实现。在子类 Child 中，我们定义了自己的属性 age 和方法 sayAge()，并且可以调用父类 Parent 的方法 sayHello()。
JS中的面向对象
王三六博客
04-27 2533
一、介绍 1.编程思想有三种： 面向过程编程POP：分析出问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以。 面向对象编程OOP：把事物分解成一个个对象，然后由对象分工与合作，每一个函数，一定会有一个原型，属性的选择性放在实例化的对象中，函数写在原型上 函数式编程FP：把现实世界 的事物和事物之间的联系抽象到程序里，用来描述数据之间的映射，相同的输入始终要得到相同的输出。 2.优点： 具有灵活性，代码可服用，容易维护和开发 3.面向对象的特性： 封装性
JavaScript 之面向对象
msn131420的博客
03-03 4240
JavaScript 面向对象 一、面向对象编程介绍 1.1 两大编程思想 面向过程 面向对象 1.2 面向过程编程 POP(Process-oriented programming) 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。 举个栗子：将大象装进冰箱，面向过程做法。 面向过程，就是按照我们分析好了的步骤，按照步骤解决问题。 1.3 面向对象编程 OOP (Object Oriented .
javascript中的面向对象
10-20
本文主要介绍了javascript中面向对象的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
JavaScript中的面向对象介绍
01-31
在其它面向对象语言中对象是由类的实例化而来，JavaScript是基于原型的面向对象语言，没有类的概念，对象派生自现有对象的副本对象创建对象构造函数公有、私有、特权、静态成员this、call和apply异常处理继承原型...
浅谈JavaScript中面向对象技术的模拟
12-10
一、引言 在C#和Java语言中，面向对象是以类的方式实现的，特别是继承这个特性，类的方式继承表现出了强大的功能，而且也易于学习。JavaScript不是纯的面向对象的语言，而是基于对象的语言，对象的继承是以原型函数...
JavaScript面向对象编程指南
07-22
资源名称：JavaScript面向对象编程指南内容简介： Javaｓｃｒｉｐｔ是一种具有高度表达能力的、基于原型特性的、非常灵活的面向对象编程语言。《Javaｓｃｒｉｐｔ面向对象编程指南》着重介绍Javaｓｃｒｉｐｔ在面向...
初识JavaScript
微风洋洋的博客
02-10 1700
初识JavaScript会发生什么事呢
JavaScript面向对象
qq_45129779的博客
11-30 128
JavaScript面向对象，详细写就对象操作方式，及如何优化对象的创建操作方式
JavaScript面向对象编程：（1）面向对象概述
上善若泪
04-24 615
目录 1 对象和面向对象编程 1.1 “对象”是单个实物的抽象 1.2 “对象”是一个容器，封装了“属性”（property）和“方法”（method） 2 构造函数 3 new命令 3.1 基本用法 3.2 new命令的原理 4 instanceof运算符 5 this关键字 5.1 this关键字涵义 5.2 使用场合 5.2.1 全局环境 5.2.2 构造函数 5...
JavaScript基础，面向对象编程（OOP)
最新发布
蜡笔不新的博客
11-14 216
​ ①方法的封装：在类内部的私有方法，无法在类外部调用即为封装​ ②属性的封装：类中的属性私有化，不能“对象名.属性名”访问（设有get/set方法）
js面向对象理解
weixin_30508309的博客
07-26 1637
js面向对象理解 ECMAScript 有两种开发模式：1.函数式(过程化)，2.面向对象(OOP)。面向对象的语言有一个标志，那就是类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。但是，ECMAScript 没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。 js（如果没有作特殊说明，本文中的js仅包含ES5以内的内容）本身是没有class类型的，但是每个函数都有一个pr...
js面向对象如此简单
qq_46133833的博客
10-24 307
面向对象是什么 面向对象编程的全称为Object Oriented Programming，简称为OOP。面向对象编程时用抽象方式创建基本于现实世界模型的一种编程模式。 面向对象编程可以看作是使用一系列对象相互协作的软件设计。面向对象程序设计的目的是在编程中促进更好的灵活性和可维护性。凭借其对模块化的重视，面向对象的代码开发更简单，更绕能够以理解。 面向对象编程的三个主要特征是：1）封装；2）继承；3）多态。 所有的程序是由一定的属性和行为对象组成的，不同的对象访问通过函数调用来完成，面向对象所有的交流都是
javascript面向对象教程
02-24
JavaScript面向对象教程，在这个教程中将带你深入了解JavaScript的面向对象特性，探讨它的支持和分类。虽然JavaScript是一个基于对象的语言，但是对于它的面向对象特性很少有人进行系统的分析。本教程希望能让你了解...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值