javascript面向对象和原型————呱呱二号

面向对象

1、工厂模式

function createObject(name,age){
  let obj = new Object();
  this.name = name;
  this.age = age;
  return obj;
}
let objA = createObject(‘Tom‘,24);
let objB = createObject(‘Jane‘,23);
typeof ObjA;　　　　//Object
typeof ObjB;　　　　//Object
ObjA instanceof Object；
ObjA instanceof Object；
//方法缺点：不能区分对象实例，所有对象实例都由Object实例化

2、构造函数模式

function Box(name,age){
  this.name = name;
  this.age = age;
  this.run = function (){
    return this.name + this.age;
  }
}
function Desk(name,age){
  this.name = name;
  this.age = age;
  this.run = function (){
    return this.name + this.age;
  }
}
let box = new Box(‘Tom‘,24);
let desk = new Desk(‘Jane‘,23);
box instanceof Box;　　//true
box instanceof Desk;　　//false
desk instanceof Desk;　　//true
//
//知识延伸，对象冒充
let o = new Object();
Box.call(o,‘Ha‘,25);
o.name;

构造函数方式和原型方式变量存储的方式

3、原型

　　我们创建的每一个函数都有一个prototype（原型属性），这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。逻辑上可以这么理解：prototype通过调用构造函数而创建的那个对象的原型对象。使用原型的好处可以让所有对象实例共享它所包含的属性和方法。也就是说，不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。(我自己的理解，通过构造函数创建的对象会自动创建一个原型对象prototype。)

function Box(){}

Box.prototype.name = ‘Lee‘;　　//原型属性

Box.prototype.age = 100;

Box.prototype.run = function () {　　//原型方法

　　return this.name + this.age + ‘运行中‘;

}

证明：原型对象内的属性和方法都被实例对象共用

let box1 = new Box();

let box2 = new Box();

Object.is(box1.run,box2.run);　　//true　　Object.is(),判断两个变量是否相等 (等于box1.run === box2.run);

说明box1和box2中的run方法都指向同一个引用地址。

在原型模式声明中，多了两个属性，这两个属性都是创建对象时自动生成的。__proto__属性是实例指向原型对象的一个指针，它的作用就是指向构造函数的原型属性constructor。通过这两个属性，就可以访问到原型里的属性和方法了。

//判断一个实例对象是否指向了原型对象，只要实例化了，会自动指向的

Box.prototype.isPrototypeOf(box1);　　//true　　　　接着上面的代码

let obj = new Object();　　//

Box.prototype.isPrototypeOf(obj);

如果实例对象中有name属性，原型对象中也有name属性，通过 . 访问name会打印处实例对象中的name属性。

function Box () {}

Box.prototype.name = ‘guaguaerhao‘;

let box1 = new Box();

box1.name = ‘呱呱二号‘;

console.log(box1.name);　　//呱呱二号

原型模式的执行流程：

1、先查找实例对象中是否存在属性，如果存在，则返回

2、如果实例对象中没有该属性，则在原型对象中查找，如果存在，则返回

判断实例中是否存在属性

box1.hasOwnProperty(‘name‘);　　//true

(name in box1)　　//不管是原型中有name属性还是实例中有name属性，都会返回true

判断只有原型中是否存在属性

function hasPrototypeProperty(object,property){

　　return !object.hasOwnProperty(property) && (property in object);

}

4、字面量原型模式

function Box () {}

Box.prototype = {

　　constructor: Box,　　//将原型对象的constructor强制指向回Box

　　name: ‘guaguaerhao‘,

　　age: 24,

　　run: function(){

　　　　return this.name + this.age;

　　}

}

ps：原型中最大的缺点就是它的优点，共享。原型模式创建的对象，省略了构造函数传参，带来的缺点就是初始化的值都是一样的。

5、构造函数加原型模式(构造函数和方法分开，没有一种封装的感觉，感觉很零碎)

function Box(name,age){　　　　//不共享的使用构造函数

　　this.name = name;

　　this.age = age;

　　this.family = [‘爸爸‘,‘妈妈‘,‘哥哥‘,‘我‘];

}

Box.prototype = {　　　　//共享的使用原型

　　constructor: Box,

　　run: function () {

　　　　return this.name + this.age;

　　}

}

6、动态原型模式

function Box(name,age){

　　this.name = name;

　　this.age = age;

　　//可是，实例化对象的时候，每次都会创建run()方法,浪费内存，因为他在每一个对象中都是一样的功能，没有必要，每次实例化都创建，实际上只需要创建一次。

　　Box.prototype.run = function () {

　　　　return this.name + this.age;

　　}

}

所以

function Box(name,age){

　　this.name = name;

　　this.name = age;

　　if(typeof this.run !== ‘function‘){　　//只会实例化一次

　　　　Box.prototype.run = function () {

　　　　　　return this.name + this.age;

　　　　}

　　}

}

7、寄生构造函数(工厂模式+构造函数)

function Box(name,age){

　　let obj = new Object();

　　obj.name = name;

　　obj.age = age;　　

　　obj.run = function (){

　　　　return this.name + this.age;

　　}

　　return obj;

}

let obj = new Box(‘ha‘,24);

obj.run();

7、寄生构造函数(工厂模式+构造函数)

function Box(name,age){

　　let obj = new Object();

　　obj.name = name;

　　obj.age = age;　　

　　obj.run = function (){

　　　　return this.name + this.age;

　　}

　　return obj;

}

let obj = Box(‘ha‘,24);

obj.run();

 继承

1、继承是面向对象中比较核心的概念，ECMAScript只支持继承：

function Parent(){

　　this.name = ‘p‘;

}

function Child(){

　　this.name = ‘c‘;

}

//通过原型链继承,父类实例化后的对象实例，赋值给子类型的原型属性

//new Parent()会将构造函数里的信息和原型的信息都交给Child

Child.prototype = new Parent();

2、对象冒充模式

为了解决引用共享和超类型无法传参的问题，采用一种叫借用构造函数的技术，或者成为对象冒充

function Parent(name,age){

　　this.name = name;

　　this.age = age;

}

//Parent.prototype.family = ‘家庭‘;　　//child实例无法访问

function Child(name,age){

　　Parent.call(this,name,age);　　//对象冒充，给父类传递参数，对象冒充只能继承构造函数中的属性，原型中的无法访问

}

let child = new Child(‘haha‘,24);

child.name;

child.family;　　//undefined

3、原型链加借用构造函数，组合模式

function Parent(age){

　　this.age = age;

}

Parent.prototype.run = function () {　　//解决了方法共享

　　return this.age;

}

function Child(age){

　　Parent.call(this,age);

}

Child.prototype = new Parent();

原文地址：https://www.cnblogs.com/guaguaerhao/p/8214038.html

时间： 2024-10-16 19:32:29

javascript面向对象和原型————呱呱二号的相关文章

第一百零九节，JavaScript面向对象与原型

JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript没有类的概念,因此它的对象也与基于类的语言中的对象有所不同.   一．学习条件 在JavaScript视频课程第一节课,就已经声明过,JavaScript课程需要大量的基础.这里,我们再详细探讨一下: 1

javascript面向对象学习笔记（二）——创建对象

javascript面向对象学习笔记(二)--创建对象 工厂模式 该模值抽象了创建具体对象de过程.用函数来封装噫特定接口创建对象的细节. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var person1=createPerson("Chiaki&

4、原生javascript封装ajax————呱呱二号

//添加事件处理function addEvent(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj.attachEvent('on' + type, function () { fn.call(obj); }); }}//移除事件处理function removeEvent(obj, type, fn) { i

javascript错误类型————呱呱二号

1.SyntaxError(语法错误) 解析代码时发生的语法错误 eg:var 1a; Uncaught SyntaxError: Unexpected number 2.ReferenceError(引用错误) a.引用了一个不存在的变量 eg: console.log(a); Uncaught ReferenceError: a is not defined b.将变量赋值给一个无法被赋值的对象 eg:console.log()= 1; Uncaught ReferenceError: In

JavaScript 面向对象 (prototype 原型模式)

一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览,不具备与访问者互动的能力.比如,如果网页上有一栏"用户名"要求填写,浏览器就无法判断访问者是否真的填写了,只有让服务器端判断.如果没有填写,服务器端就返回错误,要求用户重新填写,这太浪费时间和服务器资源了. 因此,网景公司急需一种网页脚本语言,使得浏览器可以与网页互动.工程师_Brend

JavaScript面向对象与原型（一）：构造函数

提到构造函数,我们并不陌生,在面向对象领域,构造函数已经是一个老生常谈的问题了.在JavaScript中再次学习,真的是有一种亲切的感觉. 一.简单回顾 构造函数 ,是一种特殊的方法 .主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中.特别的一个类可以有多个构造函数,可根据其参数个数的不同或参数类型的不同来区分它们即构造函数的重载. C#构造函数(一个简单的小例子): <span style="font-size:14px;"

JavaScript面向对象精要（二）

四.构造函数和原型对象 1. 构造函数 构造函数就是用new创建对象时调用的函数.使用构造函数的好处在于所有用同一个构造函数创建的对象都具有同样的属性和方法. function Person(){} var p1 = new Person(); console.log(p1.constructor === Person); // true console.log(p1 instanceof Person); // true 可以使用构造函数来检查一个对象的类型,但还是建议使用instanceof

JavaScript 面向对象与原型

ECMAScript有两种开发模式:1.函数式(过程化);2.面向对象(OOP); 一 创建对象1.普通的创建对象 ? 1 2 3 4 5 6 7 8 9 // 创建一个对象,然后给这个对象新的属性和方法;   var box = new Object();       // 创建一个Object对象;   box.name = 'lee';          // 创建一个name属性并赋值;   box.age = 100;   box.run = function(){        //

A1—浅谈JavaScript中的原型（二）

原型是什么?想要了解这个问题,我们就必须要知道对象. 对象 根据w3cschool上的介绍:对象只是带有属性和方法的特殊数据类型. 我们知道,数组是用来描述数据的.其实呢,对象也是用来描述数据的.只不过有一点点的区别,那就是数组的下标只能是数字.所以,数组最好只用来装同样意义的内容.比如说[1,2,3,4,5]或者["a","b","c","d","e"]等.因为他们的表达的含义是一样的.那么如何表达含义不