有关javaScript面向对象和原型笔记
javaScript是一种比較特殊的语言,ECMAScript中没有类的概念。跟其它面向对象的语言有一定的差别。它的对象也与基于类的语言中的对象有所不同,严格来说,javascript对象是一组没有特定顺序的值,对象的每一个属性或方法都有一个名字。而每一个名字都映射到一个值。每一个对象都是基于一个引用类型的创建的。
创建自己定义对象的最简单的方式就是创建一个Object的实例。然后再为其加入属性和方法,如:
var box = new Object(); //创建对象
box.name1 = 'Lee'; //加入属性
box.age = 100; //
box.run = function () {
return this.name1 + this.age //this表示当前作用域下对象
不足:使用同一个接口创建非常多对象。会产生非常多反复代码。
工厂模式:
在ECMAScript中无法创建类,开发者就想出了第二种方法,用一种函数来封装以特定接口创建对象的细节,如:
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('lilei',29,'Software Engineer');
var person2 = createPerson('Greg',27,'Doctor');
person1.sayName();
person2.sayName();
alert(typeof person1);
alert(typeof person2);
函数creatPerson()可以依据接受的參数来构建一个包括全部必要信息的Person对象。可以无数次低调用这个函数。而每次它都返回一个包括三个属性的一个方法的对象。
工厂模式尽管攻克了创建多个类型对象的问题,但却没有解决对象识别的问题。
构造函数模式
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person('lilei',29,'Software Engineer');
var person2 =new Person('Greg',27,'Doctor');
person1.sayName();
person2.sayName();
alert( person1 instanceof Object);
alert( person2 instanceof Person);
在这个样例其中。Person()函数代替了createPerson()函数。同一时候注意到跟createPerson()函数的差别:
没有显式地创建对象;
直接将属性和方法赋给了this对象;
没有return 语句;
构成方法首个字母大写。
构造函数的的问题也有,就是每一个方法都要在每一个实例上又一次创建一遍,
组合使用构造函数模式和原型模式
创建自己定义类型常见的方式是组合使用构造函数模式和原型模式。
构造函数模式用于定义实例属性,而原型模式用定义方法和共享属性,从而每一个实例都会有 自己的一份实例属性的副本。但同一时候又共享着对方的方法的引用。
function Person(name,age,job){
this.name =name;
this.age = age;
this.friends = ["Shelpy","Court"];
}
Person.prototype = {
constructor:Person,
sayName:function(){
alert(this.name)
}
}
var person1 = new Person('lilei',29,'Software Engineer');
var person2 = new Person('Greg',27,'Doctor');
person1.friends.push("Van");
alert(person1.friends);
alert(person2.friends);
alert(person1.friends === person2.friends);
alert(person1.sayName === person2.sayName);
在这个样例中。实例属性都是在构造函数中定义的。而由全部实例共享的属性consructor和方法sayName()则是在原型中定义的。当改动了person1.friends时,并不会影响到person2,.friends。由于它们引用了不同的数组。
有关javaScript面向对象和原型笔记的更多相关文章
- 第一百零九节,JavaScript面向对象与原型
JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标 ...
- JavaScript面向对象编程学习笔记
1 Javascript 面向对象编程 所谓"构造函数",其实就是一个普通函数,但是内部使用了this变量.对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例 ...
- 了解JavaScript 面向对象基础 & 原型与对象
面向对象语言中的对象 老是能听到什么基于对象, 面向对象. 什么是对象, 如果有面向对象基础的人可以无视了, 下面举个简单的例子给大家讲讲面向对象中, 对象的定义, 这个是比较通用的, 不过对于JS来 ...
- JavaScript面向对象和原型函数
对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔!). 常用的几种对象创建模 ...
- JavaScript面向对象与原型
工厂模式:无法识别对象 function createObject(name, age) { //集中实例化的函数 var obj = new Object(); obj.name = name; o ...
- JavaScript 面向对象与原型
ECMAScript有两种开发模式:1.函数式(过程化);2.面向对象(OOP); 一 创建对象1.普通的创建对象 ? 1 2 3 4 5 6 7 8 9 // 创建一个对象,然后给这个对象新的属性和 ...
- javascript面向对象和原型
/* //工厂模式 function createObject(name,age){ var obj = new Object();//新建一个对象 obj.name=name;//新建对象的属性 o ...
- 快速理解JavaScript面向对象编程—原型
总的来说js语言就是门面向对象编程的语言,对象这个概念几乎贯穿了整个js的学习. 对象 创建对象两种方法:(若要生成对象实例必须调用构造函数) 1.var obj = {name:"jer& ...
- JavaScript 面向对象之原型对象
原型的概述 我们创建的每个函数都有一个 prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法. 逻辑上可以这么理解:prototype 通过调用构 ...
随机推荐
- Windows网络编程笔记6 --- WinSock I/O 控制方法
Windows提供了两种方式“套接字模式”和“套接字I/O模型”,可对一个套接字上的I/O行为加以控制.套接字模式用于决定在随一个套接字调用时,那些 Winsock函数的行为.其中的模型包括括sele ...
- Appium的三种等待时间设置方法
#三种appium设置等待时间的方法 #作者:Mr.Dantes #参考了网上的资料,然后进行了梳理 #第一种 sleep(): 设置固定休眠时间. python 的 time 包提供了休眠方法 ...
- 区分Activity的四种加载模式【转载】
此文为转载,文章来源:http://marshal.easymorse.com/archives/2950 文章作者: Marshal's Blog 参考文章:http://blog.csdn.n ...
- 用例UML图
用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图中涉及的关系有:关联.泛 ...
- 史林枫:C#.NET利用ffmpeg操作视频实战(格式转换,加水印 一步到位)
ffmpeg.exe是大名鼎鼎的视频处理软件,以命令行参数形式运行.网上也有很多关于ffmpeg的资料介绍.但是在用C#做实际开发时,却遇到了几个问题及注意事项,比如如何无损处理视频?如何在转换格式的 ...
- CodeForces839B[思维] Codeforces Round #428 (Div. 2)
#include <bits/stdc++.h> using namespace std; int n, k; ; ], cnt[]; void solve() { int t; cnt[ ...
- jQuery动画的hover连续触发动画bug处理
一.问题 为元素设置hover上实现动画的效果,当鼠标反复快速进入元素时,动画会在鼠标停止后依然执行,导致动画和鼠标的动作不一致. 二.解决方法 要解决这种问题,可以使用jquery的stop()方法 ...
- [SDOI2016][bzoj4514] 数字配对 [费用流]
题面 传送门 思路 一个数字能且只能匹配一次 这引导我们思考:一次代表什么?代表用到一定上限(b数组)就不能再用,同时每用一次会产生价值(c数组) 上限?价值?网络流! 把一次匹配设为一点流量,那产生 ...
- 【CCF】JSON查询
#include<iostream> #include<cstdio> #include<string> #include<cstring> #incl ...
- live-server 快速搭建静态服务
作为切图仔呢,平时都是在修改页面样式.展示后台返回的数据.调试js效果,这时候呢就需要搭一个服务器以便我们调试.平时我一般用的都是wamp,在www目录下新建项目然后开始撸代码,不过有时候呢不太方便, ...