js面向对象学习笔记

最新推荐文章于 2024-04-18 21:21:58 发布
最新推荐文章于 2024-04-18 21:21:58 发布
阅读量316 收藏
点赞数
分类专栏： js 面向对象 文章标签： javascript 面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h5756095/article/details/50922906
版权 
<span style="white-space:pre">	</span><script type="text/javascript">
<span style="white-space:pre">		</span>/*****  面向对象编程   *****/
<span style="white-space:pre">		</span>/** 工厂模式 **/
<span style="white-space:pre">		</span>function createPerson(name, age, job) {
<span style="white-space:pre">			</span>var o = new Object();
<span style="white-space:pre">			</span>o.name = this.name;
<span style="white-space:pre">			</span>o.age = this.age;
<span style="white-space:pre">			</span>o.job = this.job;
<span style="white-space:pre">			</span>o.sayName = function() {
<span style="white-space:pre">				</span>alert(this.name);
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>return o;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>var person1 = createPerson('tom', 12, 'code');
<span style="white-space:pre">		</span>var person2 = createPerson('nick', 20, 'code1');


<span style="white-space:pre">		</span>/** 构造函数模式 **/
<span style="white-space:pre">		</span>function Person(name, age, job) {
<span style="white-space:pre">			</span>this.name = name;
<span style="white-space:pre">			</span>this.age = age;
<span style="white-space:pre">			</span>this.sayName = function () {
<span style="white-space:pre">				</span>alert(this.name);
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>var person1 = new Person('tom', 20, 'ad');
<span style="white-space:pre">		</span>var person2 = new Person('nick', 30, 'db');


<span style="white-space:pre">		</span>function Person(name, age ,job) {
<span style="white-space:pre">			</span>this.name = name;
<span style="white-space:pre">			</span>this.age = age;
<span style="white-space:pre">			</span>this.job = job;
<span style="white-space:pre">			</span>//每次创建对象都会new 一个新的function对象
<span style="white-space:pre">			</span>this.sayName = new Function("alert(this.name)");
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>// 使用全局函数不符合类的封装
<span style="white-space:pre">		</span>function Person(name, age ,job) {
<span style="white-space:pre">			</span>this.name = name;
<span style="white-space:pre">			</span>this.age = age;
<span style="white-space:pre">			</span>this.job = job;
<span style="white-space:pre">			</span>this.sayName = sayName; //调用全局函数
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>function sayName() {
<span style="white-space:pre">			</span>alert(this.name);
<span style="white-space:pre">		</span>}




<span style="white-space:pre">		</span>/**  原型模式  **/
<span style="white-space:pre">		</span>function Person() {
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>Person.prototype.name = 'nick';
<span style="white-space:pre">		</span>Person.prototype.age = 20;
<span style="white-space:pre">		</span>Person.prototype.sayName = function () {
<span style="white-space:pre">			</span>alert(this.name);
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>var person1 = new Person();
<span style="white-space:pre">		</span>var person2 = new Person();
<span style="white-space:pre">		</span>person1.sayName();
<span style="white-space:pre">		</span>person2.sayName();
<span style="white-space:pre">		</span>alert(person1.sayName == person2.sayName);
<span style="white-space:pre">		</span>//获取所有可枚举属性数组
<span style="white-space:pre">		</span>Object.keys(Person.prototype); // [name,age,sayName];
<span style="white-space:pre">		</span>person1.name = 'tom';
<span style="white-space:pre">		</span>person1.age = 30;
<span style="white-space:pre">		</span>Object.keys(person1);//[name,age]
<span style="white-space:pre">		</span>//获得所有属性，无论是否可枚举
<span style="white-space:pre">		</span>Object.getOwnPropertyNames(Person.prototype);//[constructor,name,age,job,sayName]


<span style="white-space:pre">		</span>/** 验证实例属性属于原型对象而不属于实例 **/
<span style="white-space:pre">		</span>function hasPrototypeProperty(object, name) {
<span style="white-space:pre">			</span>// object.hasOwnProperty(name) 验证实例中是否有该属性，是：true,否，false
<span style="white-space:pre">			</span>// name in object 验证该属性是否属于该对象的原型对象属性或类属性
<span style="white-space:pre">			</span>return !object.hasOwnProperty(name) && (name in object);
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>/** 组合使用构造函数模式和原型模式 **/
<span style="white-space:pre">		</span>function Person(name, age, job) {
<span style="white-space:pre">			</span>this.name = name;
<span style="white-space:pre">			</span>this.age = age;
<span style="white-space:pre">			</span>this.job = job;
<span style="white-space:pre">			</span>this.friends = ['Shelby', 'courty'];
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>Person.prototype = {
<span style="white-space:pre">			</span>constructor: Person,
<span style="white-space:pre">			</span>sayName: function() {
<span style="white-space:pre">				</span>alert(this.name);
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>var person1 = new Person('nick', 29, 'software engin');
<span style="white-space:pre">		</span>var person2 = new Person('tom', 30, 'fadsf');


<span style="white-space:pre">		</span>person1.friends.push('van');
<span style="white-space:pre">		</span>alert(person1.friends);//Shelby,courty,van
<span style="white-space:pre">		</span>alert(person2.friends);//Shelby,conrty
<span style="white-space:pre">		</span>alert(person1.friends == person2.friends); //false
<span style="white-space:pre">		</span>alert(person1.sayName == person2.sayName); //true


<span style="white-space:pre">		</span>/**  动态原型模式 **/
<span style="white-space:pre">		</span>function Person(name, age, job) {
<span style="white-space:pre">			</span>this.name = name;
<span style="white-space:pre">			</span>this.age = age;
<span style="white-space:pre">			</span>this.job = job;


<span style="white-space:pre">			</span>//先检查后初始化
<span style="white-space:pre">			</span>if (typeof this.sayName != "function") {
<span style="white-space:pre">				</span>Person.prototype.sayName = function() {
<span style="white-space:pre">					</span>alert(this.name);
<span style="white-space:pre">				</span>}
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>/** 寄生虫模式  **/
<span style="white-space:pre">		</span>function Person(name, age, job) {
<span style="white-space:pre">			</span>var o = new Object();
<span style="white-space:pre">			</span>o.name = name;
<span style="white-space:pre">			</span>o.age = age;
<span style="white-space:pre">			</span>o.job = job;
<span style="white-space:pre">			</span>o.sayName = function() {
<span style="white-space:pre">				</span>alert(this.name);
<span style="white-space:pre">			</span>}
<span style="white-space:pre">			</span>return o;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>//例子
<span style="white-space:pre">		</span>function SpecialArray() {
<span style="white-space:pre">			</span>//创建数组
<span style="white-space:pre">			</span>var values = new Array();
<span style="white-space:pre">			</span>//添加值
<span style="white-space:pre">			</span>values.push.apply(values, arguments);
<span style="white-space:pre">			</span>//添加方法
<span style="white-space:pre">			</span>values.toPipedString = function() {
<span style="white-space:pre">				</span>return this.join("|");
<span style="white-space:pre">			</span>};
<span style="white-space:pre">			</span>//返回数组
<span style="white-space:pre">			</span>return values;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>var colors = new SpecialArray("red",'blue','green');
<span style="white-space:pre">		</span>alert(colors.toPipedString()); //"red|blue|green"


<span style="white-space:pre">		</span>/** 稳妥构造函数模式 **/
<span style="white-space:pre">		</span>//用于在安全环境中，或者防止数据被其它程序改动时使用
<span style="white-space:pre">		</span>function Person(name, age, job) {
<span style="white-space:pre">			</span>var o = new Object();
<span style="white-space:pre">			</span>o.sayName = function () {


<span style="white-space:pre">			</span>};
<span style="white-space:pre">			</span>return o;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>//除了使用sayName方法之外，没有其它办法访问name的值


<span style="white-space:pre">		</span>/****  继承  ****/
<span style="white-space:pre">		</span>/** 原型链 **/
<span style="white-space:pre">		</span>function SuperType() {
<span style="white-space:pre">			</span>this.property = true;
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>SuperType.prototype.getSuperValue = function() {
<span style="white-space:pre">			</span>return this.property;
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>function SubType() {
<span style="white-space:pre">			</span>this.subproperty = false;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>//继承了SuperType
<span style="white-space:pre">		</span>SubType.prototype = new SuperType();
<span style="white-space:pre">		</span>SubType.prototype.getSubValue = function() {
<span style="white-space:pre">			</span>return this.subproperty;
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>var instance = new SubType();
<span style="white-space:pre">		</span>alert(instance.getSuperValue()); //true


<span style="white-space:pre">		</span>/** 借用构造函数 **/
<span style="white-space:pre">		</span>function SuperType() {
<span style="white-space:pre">			</span>this.colors = ['red','blue','green'];
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>function SubType() {
<span style="white-space:pre">			</span>//继承SuperType
<span style="white-space:pre">			</span>SuperType.call(this);
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>var instance1 = new SubType();
<span style="white-space:pre">		</span>instance1.colors.push('black');
<span style="white-space:pre">		</span>alert(instance1.colors); //'red,blue,green,black';
<span style="white-space:pre">		</span>var instance2 = new SubType();
<span style="white-space:pre">		</span>alert(instance2.colors); //'red,blue,green';
<span style="white-space:pre">		</span>//传递参数
<span style="white-space:pre">		</span>function SuperType(name) {
<span style="white-space:pre">			</span>this.name = name;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>function SubType() {
<span style="white-space:pre">			</span>//继承SuperType, 同时传递参数
<span style="white-space:pre">			</span>SuperType.call(this, 'Nicholas');


<span style="white-space:pre">			</span>//实例属性
<span style="white-space:pre">			</span>this.age = 29;
<span style="white-space:pre">		</span>}


<span style="white-space:pre">		</span>var instance = new SubType();
<span style="white-space:pre">		</span>alert(instance.name); //'Nicholas';
<span style="white-space:pre">		</span>alert(instance.age); //29


<span style="white-space:pre">		</span>/** 组合继承 **/
<span style="white-space:pre">		</span>function SuperType(name) {
<span style="white-space:pre">			</span>this.name = name;
<span style="white-space:pre">			</span>this.colors = ['red','blue','green'];
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>SuperType.prototype.sayName = function() {
<span style="white-space:pre">			</span>alert(this.name);
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>function SubType(name, age) {
<span style="white-space:pre">			</span>//继承属性
<span style="white-space:pre">			</span>SuperType.call(this, name); //第二次调用SuperType
<span style="white-space:pre">			</span>this.age = age;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>SubType.prototype = new SuperType(); //第一次调用SuperType
<span style="white-space:pre">		</span>SubType.prototype.sayAge = function() {
<span style="white-space:pre">			</span>alert(this.age);
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>var instance1 = new SubType('Nicholas', 29);
<span style="white-space:pre">		</span>instance1.colors.push('black');
<span style="white-space:pre">		</span>alert(instance1.colors); // 'red, blue, green, black';
<span style="white-space:pre">		</span>instance1.sayName(); //Nicholas;
<span style="white-space:pre">		</span>instance1.sayAge();//29
<span style="white-space:pre">		</span>var instance2 = new SubType('Gren', 27);
<span style="white-space:pre">		</span>alert(instance2.colors); //'red,blue,green';
<span style="white-space:pre">		</span>instance2.sayName(); // Gren
<span style="white-space:pre">		</span>instance2.sayAge(); //27
<span style="white-space:pre">		</span>// 在第一次调用SuperType构造函数时，SubType.prototype会得到两个属性：name和colors；她们都是SuperType的实例属性,
<span style="white-space:pre">		</span>//只不过现在位于SubType的原型中.当调用SubType的构造函数时，又条用了一
<span style="white-space:pre">		</span>//次SuperType构造函数，这一次又在新对象上创建了实例属性：name和colors。
<span style="white-space:pre">		</span>//于是这两个属性就屏蔽了原型中的同名属性




<span style="white-space:pre">		</span>/** 原型式继承 **/
<span style="white-space:pre">		</span>function object(o) {
<span style="white-space:pre">			</span>function F() {};
<span style="white-space:pre">			</span>F.prototype = o;
<span style="white-space:pre">			</span>return new F;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>var person = {
<span style="white-space:pre">			</span>name: 'tom',
<span style="white-space:pre">			</span>friends: ['shelby', 'court', 'van']
<span style="white-space:pre">		</span>};
<span style="white-space:pre">		</span>var anotherPerson = object(person);
<span style="white-space:pre">		</span>anotherPerson.name = 'Greg';
<span style="white-space:pre">		</span>anotherPerson.friends.push('Rob');


<span style="white-space:pre">		</span>var yetAnotherPerson = object(person);
<span style="white-space:pre">		</span>yetAnotherPerson.name = 'Linda';
<span style="white-space:pre">		</span>yetAnotherPerson.friends.push('Barbie');


<span style="white-space:pre">		</span>alert(person.friends); // shelby,court,van,Rob,Barbie


<span style="white-space:pre">		</span>/** 寄生式继承 **/
<span style="white-space:pre">		</span>function createAnother(original) {
<span style="white-space:pre">			</span>var clone = object(original); //通过调用函数创建一个新对象
<span style="white-space:pre">			</span>clone.sayHi = function() { //以某种方式来增强对象
<span style="white-space:pre">				</span>alert('Hi');
<span style="white-space:pre">			</span>};
<span style="white-space:pre">			</span>return clone;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>var person = {
<span style="white-space:pre">			</span>name: 'tom',
<span style="white-space:pre">			</span>friends: ['shelby', 'court', 'van']
<span style="white-space:pre">		</span>};
<span style="white-space:pre">		</span>var anotherPerson = createAnother(person);
<span style="white-space:pre">		</span>anotherPerson.sayHi(); //hi


<span style="white-space:pre">		</span>/** 寄生组合模式 **/
<span style="white-space:pre">		</span>function inheritPrototype(SubType, SuperType) {
<span style="white-space:pre">			</span>var prototype = object(SuperType.prototype); //创建对象
<span style="white-space:pre">			</span>prototype.constructor = SubType; //增强对象
<span style="white-space:pre">			</span>SubType.prototype = prototype;   //指定对象
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>function SuperType(name) {
<span style="white-space:pre">			</span>this.name = name;
<span style="white-space:pre">			</span>this.colors = ['red', 'blue', 'green'];
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>SuperType.prototype.sayName = function() {
<span style="white-space:pre">			</span>alert(this.name);
<span style="white-space:pre">		</span>};
<span style="white-space:pre">		</span>function SubType(name, age) {
<span style="white-space:pre">			</span>SuperType.call(this, name);
<span style="white-space:pre">			</span>this.age = age;
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>inheritPrototype(SubType, SuperType);
<span style="white-space:pre">		</span>SubType.prototype.sayAge = function() {
<span style="white-space:pre">			</span>alert(this.age);
<span style="white-space:pre">		</span>}
<span style="white-space:pre">		</span>//此模式的高效率体现在它只条用了一次SuperType的构造函数，并且因此避免了
<span style="white-space:pre">		</span>//在SubType.prototype上面创建不必要的。多余的属性。与此同时，原型链还
<span style="white-space:pre">		</span>//能保持不变；因此，还能够正常使用instanceof 和 isPrototypeOf()


<span style="white-space:pre">	</span></script>

h5756095
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
面向对象
mtx188的博客
11-23 116
一．类和对象 1. 定义 类：是对一类事物的描述，是概念上的抽象的定义。例如：汽 车的设计图纸。不占用内存空间。 对象：实际存在的该类的每个个体。例如：根据汽车的图纸生 产出来的一俩汽车。占内存空间。 “万物皆对象” 2.语法结构 修饰符 class 类名{ 属性； --&amp;gt;名词：大小，颜色，形状 方法； --&amp;gt;动词：跑，刹车，加速 } 主类：包含main方法的类，修饰符为publ...
面向对象笔记(全)
m0_65076170的博客
05-24 442
总结面向对象的所有笔记
day07 面向对象
SUIT THUG!的博客
06-26 220
1. 类和对象 **面向对象和面向过程的思想对比 : ** ​ **面向过程 ：**是一种以过程为中心的编程思想，实现功能的每一步，都是自己实现的 ​ **面向对象 ：**是一种以对象为中心的编程思想，通过指挥对象实现具体的功能 1.1 类和对象的关系 客观存在的事物皆为对象 ，所以我们也常常说万物皆对象。 类 类的理解 类是对现实生活中一类具有共同属性和行为的事物的抽象 类是对象的数据类型，类是具有相同属性和行为的一组对象的集合 简单理解：类就是对现实事物的一种描述 类的组成 属性：指事物的特
面向对象学习笔记
helloworld7741的博客
12-10 157
面向对象学习笔记
面向对象的学习笔记
javazaixian的专栏
02-27 339
面向对象三大特征: 封装：解决了数据的安全问题. 继承: 解决了代码的重用问题. 多态：解决了程序的扩展问题. 继承的概念: 在现实生活中，可以理解为儿子继承了父亲的财产。 财产的重用。 在程序中是解决代码的重用问题 继承是利用现有的类创建新类的过程，现有的类称作基类（父类）。创建的新类称作 派生类（子类） 基类（父类） 派生类(子类) 方法+属性
面向对象学习笔记（基础）
一只行走在闹市的猪
06-01 423
基本概念面向过程：结构化程序设计，我们在解决问题中，注重的是解决问题的每个步骤和过程。面向对象（oop）：注重的是在问题中涉及的那些对象，以及对象之间有哪些关系。面向对象的优势：尽量把修改控制在一个小的范围。能轻松的应对修改。  核心思想 缺点 算法 面向过程 自顶而下，逐步分解，也就是把功能分解。 设计数据结构 编写基础代码，基于数据结构操作 一旦数据结构发生修改，必须就要修改操作...
javascript面向对象学习笔记
10-20
javascript面向对象学习笔记，包含类、对象、实现继承
JavaScript函数、闭包、原型、面向对象学习笔记
10-18
给大家分享了一篇关于JavaScript函数、闭包、原型、面向对象的知识点学习笔记内容，有兴趣的朋友参考下。
js面向对象笔记
08-11
js面向对象的总结笔记，如果是刚入门的朋友，不妨一起学习进步
《javascript设计模式》学习笔记七：Javascript面向对象程序设计组合模式详解
10-15
主要介绍了Javascript面向对象程序设计组合模式,结合实例形式分析了《javascript设计模式》中Javascript面向对象组合模式相关概念、原理、定义、用法及操作注意事项,需要的朋友可以参考下
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1069
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
Storage 工具如何封装(前缀、加密、过期时间等)及localStorage的基础介绍
qq_43641110的博客
04-18 567
​​​​​​​。
Vue.js（自定义指令）
Luo3255069063的博客
04-18 86
【代码】Vue.js（自定义指令）
PLSQL的下载与安装
code袁的博客
04-18 248
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
js的filter函数
xiaohua0708day的博客
04-14 273
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
TS基础2-常用类型
qq_40147756的博客
04-12 479
ts 中常用类型和举例说明。
vue3【实用教程】侦听器 watch，自动侦听 watchEffect()，$watch，手动停止侦听器
最新发布
朝阳39的博客
04-18 664
侦听明确指定的状态变化执行回调。
【可视化大屏开发】19. 加餐-百度地图API实现导航加线路热力图
pblh123的专栏
04-17 665
Web端使用场景中会涉及到地图导航路线情况，并利用热力图显示路况信息。实现效果如下：输入起始地点，选择并开始导航最终效果。
vue3 手写tab栏的滑动效果
Michelle209的博客
04-12 237
在tab上定位一个slider，每次点击的时候获取当前active的tab-item序号，从而获取到其相对于父元素的水平距离，然后把这个距离更新到slider的left属性上。
python面向对象笔记
05-23
但是，对于Python面向对象编程方面的实现，可以参考一些基本概念和语法。例如，面向对象编程中，类是一种代码模板，用于创建对象。对象是类的实例，其基于类定义和继承，具有类中定义的所有属性和方法。下面是一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值