今天和大家分享一下近期整理的有关JavaScriptOOP的基础知识~~~我们一起来学习一下……

JavaScriptOOP基础

一、面向对象编程OOP
1、语言的分类:
面向机器:汇编语言
面向过程:C语言
面向对象:C++,Java,PHP等
2、面向过程和面向对象
①面向过程:专注于如何去解决一个问题的过程。
编程特点:用一个个函数去实现过程操作,没有类和对象的概念;
②面向对象:专注于有哪一个对象实体去解决这个问题。
编程特点是:出现了一个个的类,由类去生成对象。

二、面向对象的三大特征
继承,封装,多态

三、类&对象的关系
1、类:一群有相同特征(属性)和行为(方法)的集合
eg: 人类
属性:"身高,体重,年龄"
方法:"吃饭,睡觉,敲代码"

2、对象:从类中,new出的具有确定属性值和方法的个体称为对象。
eg:张三:属性:身高:身高178,体重150 方法:说话---我叫张三

3、类和对象的关系:
类是抽象的,对象是具体的。
(!类是对象的抽象化,对象是类的具体化!

通俗的来讲:
类是一个抽象概念,表示具有相同属性和行为的集合。
但是类仅仅表示表明这类群体具有相同的属性,但是没有具体的属性值。
而对象是对类的属性进行具体赋值后,而得到的一个具体的个体;

eg:人类有身高体重年龄,但不能具体说人类的身高体重具体是多少;而张三是人类的一个具体个体,身高体重等有具体值,则张三就是人类的一个对象。

4、使用类和对象的步骤:
①创建一个类(构造函数):
类名,必须要每个单词首字母都大写

function 类名(属性一){
this.属性 = 属性一;
this.方法= function(){}
//this指向谁?即将调用当前构造函数的对象。
}

②通过类,实例化出一个新的对象;

var obj = new 类名(属性一Value);
//原构造函数中this,指向新创建的obj对象
obj.方法();调用方法
obj.属性();调用属性
实例化对象的时候,会执行构造函数

5、两个重要属性:
constructor:返回当前对象的构造函数。(只有对象才有,返回的是构造函数-类)
>>>zhangsan.constructor == Person
>>>对象的constructor,位于_proto_原型对象上(后续讲解)

instanceof:判断对象是否是某个类的实例
>>>zhangsan instanceof Person true
>>>zhangsan instanceof Object true
>>>Person instanceof Object true(函数也是对象)

6、广义对象与狭义对象:
广义对象:除了用字面量声明的基本数据类型之外,外物皆对象,换句话说,能够添加属性和方法的变量,就是对象;
var s = "1" ; 不是对象
var s = new String("1") ; 就是对象
狭义对象:只有属性,方法,除此之外没有任何东西。
var obj = {}; var obj = new Object();

成员属性与成员方法
一、成员属性与成员方法
1、在构造函数中通过this.属性声明;或者实例化出对象后,通过"对象.属性"追加的。
都属于成员属性,或成员方法;也叫实例属性与实例方法。

成员属性/方法,是属于实例化出的这个对象。
通过"对象.属性"调用

二、静态属性与静态方法
2、通过"类名.属性名","类名.方法名"声明的变量,称为静态属性,静态方法;也叫类属性、类方法。

类属性/类方法,是属于类的(属于构造函数的)
通过"类名.属性名"调用

3、成员属性,是属于实例化出的对象的,会出现在新对象的属性上
静态属性,是属于类(构造函数)自己的,不会出现在新对象的属性上

4、JS对象属性的删除:
①对象无需手动删除,JS
②删除对象的属性:delete 对象名.属性名

5、对象是引用数据类型
也就是说,当new出一个对象时,这个obj变量存储的实际上是对象的地址,在对象赋值时,赋的也是地址。
function Person(){}
var xiaoxi = new Person();//xiaoxi对象实际上存的是地址
var ashu = xiaoxi;//赋值时,实际是将xiaoxi存的地址给了ashu
ashu.name = "阿树";//阿树通过地址,修改了地址
console.log(xiaoxi.name);//xiaoxi再通过地址打开对象,实际已经变了

引用数据类型,赋值时传递的是引用(地址)---快捷方式
基本数据类型,赋值时传递的是数据(值)

三、私有属性和私有方法
6、在构造函数中,通过var声明的属性,成为私有属性:
function Person(){var num=1;}

私有属性的作用域,仅在当前函数有效。对外不公开,即通过对象/类都无法调用到。

原型与原型链

【__proto__与prototype】
1、prototype(函数的原型):函数才有prototype。
prototype是一个对象,指向了当前构造函数的引用地址。
2、__proto__(对象的原型对象):所有对象都有__proto__属性。当用构造函数实例化(new)一个对象时,
会将新对象的__proto__属性,指向构造函数的prototype。

eg:zhangsan.__proto__==Person.prototype √

所有对象最终都会指向Object()的prototype。

【原型链】
1、通过构造函数,new出的对象,新对象的__proto__指向构造函数的prototype。
2、所有函数的__proto__指向Function()的prototype。
3、非构造函数new出的对象({} new Object() 对象的prototype)的__proto__指向Object的prototype。
4、Object的__proto__指向Null。

原型属性与原型方法

【类中属性与方法的声明方式】
1、成员属性、成员方法:
this.name = ""; this.func = function(){}
>>>属于实例化出的对象的。通过"对象.属性"调用。

2、静态属性、静态方法:
Person.name = ""; Person.func = function(){}
>>>属于类(构造函数)的。通过"类名.属性"调用。

3、私有属性、私有方法:
在构造函数中,使用var num = 1;声明
>>>只在构造函数内部能用,在外部无法通过任何方式访问。

4、原型属性、原型方法:
Person.prototype.name = "";
Person.prototype.func = function(){};
>>>写在了构造函数的prototype上,当使用构造函数实例化对象时,该属性方法会进入新对象的__proto__上。

也就是说,1/4使用对象可访问,2使用类名可访问,3只能在函数的{}内使用。

5、习惯上,我们会将属性写为成员属性,而方法写为原型方法;

eg:

 function Person(){
this.name = "zhangsan";
}
Person.prototype.say = function(){}

原因:
①实例化出对象后,所有属性直接在对象上,所有方法都在__proto__上,非常直观清晰。
②方法写到prototype上,要更加节省内存。
③使用for in 循环时,会将对象以及对象原型链上的所有属性和方法打印出来,而方法往往是不需要展示的。
将方法写到__proto__上,可以使用hasOwnProperty将原型上的方法更好的过滤。
④官方都这么写。

6、当访问对象的属性/方法时,会优先使用对象自有的属性和方法。
如果没有找到,便使用__proto__属性在原型上查找,如果找到即可使用。
但是,当对象自身,以及__proto__上有同名方法,执行对象自身的。

7、可以通过prototype扩展内置函数的相关方法。

代码演示:

 function Person(){
this.name1 = "name1"; //成员属性
this.age = "age1";
this.sex = "男";
this.say = function(){
alert("我是大帅哥!");
}
var name2 = "name2";//私有属性
}
Person.name3 = "name3";//静态属性
Person.prototype.name4 = "name4";//原型属性 Person.prototype.say = function(){
alert("我叫"+this.name1);
} var zhangsan = new Person();
// zhangsan.say = function(){
// alert("我是大帅哥!");
// }
zhangsan.say();
zhangsan.toString(); console.log(zhangsan); // console.log(zhangsan.name1);
// console.log(zhangsan.name2);
// console.log(zhangsan.name3);
// console.log(zhangsan.name4);
//
// console.log(s);

可以通过prototype扩展内置函数的相关方法

代码演示:

 Number.prototype.add = function(a){
return this+a
} var num = new Number(10);
console.log(num);
alert(num.add(3)); /*
* 为Array类添加一个find(val)方法,当一个Array对象调用该方法的时候,如果能找到val值,则返回其下标,否则返回-1。
*/
Array.prototype.find = function(val){
for (var i = 0; i<this.length;i++) {
if(this[i]==val){
return i;
}
}
return -1;
}
var arr = new Array(1,2,3,4,5);
alert(arr.find(1));

位String类添加一个字符串反转方法

 String.prototype.fanzhuan = function(){
var arr = this.split("");
arr.reverse();
return arr.join("")
} console.log(str.fanzhuan()); for-in循环 【for-in循环】
for-in循环,主要用于遍历对象。
for()中格式:for(keys in obj){} keys表示obj对象的每一个键值对的键,所以{}中,使用obj[keys]读取每个值;
但是,使用for-in循环,不但能遍历对象本身的属性和方法。还能够遍历对象原型链上的所有属性和方法。 可以使用hasOwnProperty判断一个属性,是否是对象自身的属性。
obj.hasOwnProperty(keys)==true 表示:keys是对象自身的一个属性 代码演示:
// foreach
function Person(){
this.name1 = "name11111"; //成员属性
this.age = "age11111";
this.func2 = function(){
console.log("thisFun")
}
}
Person.name3 = "name333333";
Person.prototype.name4 = "name44444";
Person.prototype.func1 = function(){
console.log("prototypeFun")
}
var zhangsan = new Person();
for(keys in zhangsan){
if(zhangsan.hasOwnProperty(keys)){ //过滤掉原型上的属性,只打印对象自身属性
console.log(zhangsan[keys])
}
}

JS OOP 中的继承【JS模式实现继承的三种方式】

【文档注释】第一行两个星号
/**
* ……
*/
调用函数时,可以看到注释内容

【JS OOP 中的继承】
1、使用一个子类继承另一个父类,子类可以自动拥有父类的属性和方法。

>>>继承的两方,发生在两个类之间。

2、JS模式实现继承的三种方式:

1)扩展Object实现继承

①定义父类:function Parent(){}
②定义子类:function Son(){}
③通过原型给Object对象添加一个扩展方法。

 Object.prototype.customExtend = function(parObj){
for(var i in parObj){
//通过for-in循环,把父类的所有属性方法,赋值给自己。
this[i] = ParObj[i];
}
}

④子类对象调用扩展方法
son.customExtend(Parent);

2)使用call和apply
首先,了解一下call和apply:通过函数名调用方法,强行将函数中的this指向某个对象;
call写法:func.call(func的this指向的obj,参数1,参数2...);
apply写法:func.apply(func的this指向的obj,[参数1,参数2...]);
call与apply的唯一区别:在于接收func函数的参数方式不同。call采用直接写多个参数的方式,而apply采用是一个数组封装所有参数。
①定义父类 funtion Parent(){}
②定义子类 function Son(){}
③在子类中通过call方法或者apply方法去调用父类。
function Son(){
Parent.call(this,....);
}
3)使用原型继承
①定义父类function Parent(){}
②定义子类function Son(){}
③把在子类对象的原型对象声明为父类的实例。
Son.prototype = new Parent();

闭包

【JS中的作用域】

1、全局变量:函数外声明的变量
局部变量:函数内声明的变量

在JS中,函数为唯一的局部作用域,而if、for等其他{}没有自己的作用域
所以,函数外不能访问局部变量。
其实,变量在函数执行完毕以后,占用的内存就被释放。

2、如何访问函数私有变量?
JS中,提供了一种"闭包"的概念:在函数内部,定义一个子函数,可以用子函数访问父函数的私有变量。执行完操作以后,将子函数通过return返回。

 function func2(){
var num = 1;
function func3(){
var sum = num+10;
alert(sum);
}
return func3;
}
var f = func2();
f();

3、闭包的作用:
① 访问函数的私有变量;
② 让函数的变量始终存在于内存中,而不被释放。

代码演示:

 function func1(){
var n = 1;
}
if(true){
var m = 3;
}
//alert(m); // 3
func1();
//alert(n);// 报错。函数外不能访问局部变量。其实,n变量在func1函数执行完毕以后,占用的内存就被释放。 /*闭包*/
function func2(){
var num = 1;
function func3(){
var sum = num+10;
alert(sum);
}
return func3;
}
var f = func2();
f(); // 循环转一次,创建一个lis[i].onclick函数。但是,当点击li执行函数的时候,i已经变为6,所以无论点击哪一个,i都是6
// 循环创建lis[i].onclick的时候, 循环一次,li[i]里面的i都被赋为不同值;创建了 li[1] li[2] li[3]...
// 但是,创建过程中,并没有执行onlick后面的函数,所以函数里面的i并没有赋值,还是字母i。
// 最终,我们点击li[1] li[2]...时,onclick函数里面的i才会赋值。(但此时,全局变量的i ,已经成为6 了)
var lis = document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
lis[i].onclick = function(){
//alert("您/点击了第"+i+"个li!");
//console.log(lis[i]);
//console.log(this);
}
} // 循环转一次,创建一个自执行函数。
// 而自执行函数拥有自己的作用域,所以用函数局部作用域j保存当前的全局变量i值。这样,创建第一个自执行函数,它的j=1;创建第二个,它的j=2...不同函数的j互不干扰。
// 这样,循环转完以后,相当于创建了6个自执行函数,每个函数中都有一个不同的j变量
var lis = document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
!function(){
var j = i;
lis[j].onclick = function(){
alert("您/点击了第"+j+"个li!");
//console.log(lis[i]);
//console.log(this);
}
}();
} var lis = document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
!function(j){
lis[j].onclick = function(){
alert("您/点击了第"+j+"个li!");
//console.log(lis[i]);
//console.log(this);
}
}(i);
}

【JavaScript OPP基础】---新手必备的更多相关文章

  1. [新手必备]Python 基础入门必学知识点笔记

    Python 作为近几年越来越流行的语言,吸引了大量的学员开始学习,为了方便新手小白在学习过程中,更加快捷方便的查漏补缺.根据网上各种乱七八糟的资料以及实验楼的 Python 基础内容整理了一份极度适 ...

  2. Android基础新手教程——1.2.1 使用Eclipse + ADT + SDK开发Android APP

    Android基础新手教程--1.2.1 使用Eclipse + ADT + SDK开发Android APP 标签(空格分隔): Android基础新手教程 1.前言 这里我们有两条路能够选,直接使 ...

  3. Android基础新手教程——1.2 开发环境搭建

    Android基础新手教程--1.2 开发环境搭建 标签: Android基础新手教程 如今主流的Android开发环境有: ①Eclipse + ADT + SDK ②Android Studio ...

  4. JavaScript RegExp 基础详谈

    前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时 ...

  5. JavaScript学习基础部分

    JavaScript学习基础 一.简介 1.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比方说 Internet Explorer. Mozilla.Firefo ...

  6. JavaScript入门基础

    JavaScript基本语法 1.运算符 运算符就是完成操作的一系列符号,它有七类: 赋值运算符(=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=).算术运 ...

  7. JavaScript 语言基础知识点总结(思维导图)

    JavaScript 数组 JavaScript 函数基础 Javascript 运算符 JavaScript 流程控制 JavaScript 正则表达式 JavaScript 字符串函数 JavaS ...

  8. JavaScript语言基础知识点图示(转)

    一位牛人归纳的JavaScript 语言基础知识点图示. 1.JavaScript 数据类型 2.JavaScript 变量 3.Javascript 运算符 4.JavaScript 数组 5.Ja ...

  9. JavaScript 语言基础知识点总结

    网上找到的一份JavaScript 语言基础知识点总结,还不错,挺全面的. (来自:http://t.cn/zjbXMmi @刘巍峰 分享 )  

随机推荐

  1. redux计算器

    //简单运用redux写了一个加减乘除功能 <!DOCTYPE html><html lang="en"><head> <meta cha ...

  2. linux里的那么点东西(持续更新)

    作为一个程序猿的确是应该上的了windows,下的了linux的.但是由于没有对linux产生一些刚性的需求,所以使用的次数还是略少,对一些基本的concept和command还是有一些生疏.借着最近 ...

  3. 《Algorithms Unlocked》读书笔记1——循环和递归

    <Algorithms Unlocked>是 <算法导论>的合著者之一 Thomas H. Cormen 写的一本算法基础. 书中没有涉及编程语言,直接用文字描述算法,我用 J ...

  4. SDRAM notebook

    /*******************************************************************************/ chapter  one * SDR ...

  5. ROS使用常见问题

    1.Q:查看ros版本 A:先在终端输入roscore,打开新终端,再输入,rosparam list,再输入rosparam get /rosdistro,就能得到版本. 2.Q:运行命令$ ros ...

  6. App字体大小不随系统改变而改变

    转载请注明出处:http://www.cnblogs.com/cnwutianhao/p/6713724.html 在 "设置" , "显示" , " ...

  7. 构造函数与普通函数的区别还有关于“new”操作符的一些原理

    有一种创建对象的方法叫做工厂模式,例如: function person(name,age){ var o=new Object(); o.name=name; o.age=age; return o ...

  8. html 数字不转行问题

    代码如下 <div style="width:20px;height:20px"> 111111111111111111111111111111111111111111 ...

  9. AJAX做增删改查详细!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. js的几大数据类型

    一. js的几大数据类型 数字:浮点数(3.14)+整数(1): 字符串:包括由任意数量字符组成的序列,例如:'a','one': 布尔值:true+false: undefined:当我们试图访问一 ...