本篇是通过学习视频《一头扎进javascirpt高级篇》整理的一些相关知识,大致包括下面几个方面:

  1 对象的创建方法

  2 对象的对象属性、私有属性、类属性

  3 对象的对象方法、私有方法、类方法

  4 javascirpt的继承、封装、与多态

  对象的创建方法:

  对象的创建可以通过两种方式,第一种通过对象初始化的方法:

            var person={
name:"xingoo",
age:26,
say:function(){
console.log("say something");
},
action:function(){
console.log("do something");
}
}; console.log(person.name);
console.log(person.age);
person.say();
person.action();

  第二种方式通过构造函数创建:

            function student(name,age){
this.name = name;
this.age = age;
this.say = function(){
console.log("say something");
}
this.action = function(){
console.log("do something");
}
}
var xingoo = new student("xingoo",27);
console.log(xingoo.name);
console.log(xingoo.age);
xingoo.say();
xingoo.action();

  对象的属性

  对象的属性分为对象属性、私有属性和类属性。

  对象属性需要创建对象后才能使用;

  私有属性在内部可以直接使用,在外部需要通过闭包才能使用。

  类属性可以通过对象名称直接使用。

       function func(){
this.objPro1 = "对象属性";
func.prototype.objPro2 = "对象属性"; var privatePro = "私有属性";
}
func.classPro = "类属性"; console.log(func.classPro); var f = new func();
console.log(f.objPro1);
console.log(f.objPro2); <!-- 私有属性可以通过闭包获取 -->

  对象的方法

  对象方法包括:对象方法,私有方法和类方法,使用类似前面的属性。

            function demoFunc1(){
var privateFunc = function(){
console.log("this is privateFunc");
}; privateFunc(); this.objFunc1 = function(){
console.log("this is objFunc1");
};
demoFunc1.prototype.objFunc2 = function(){
console.log("this is objFunc2");
};
}
demoFunc1.classFunc = function(){
console.log("this is classFunc");
};
demoFunc1.classFunc(); var f = new demoFunc1();
f.objFunc1();
f.objFunc2();

  继承、封装与多态

  JS要想实现继承,需要通过apply方法或者prototype实现。

  如果单纯的使用apply方法,子类的原型是子类;如果使用prototype,那么子类的原型也将继承父类。

  例如下面的代码:

            function Animal(name,age){
this.name = name;
this.age =age;
this.say = function(){
console.log("animal say something");
}
}
function Cat(name,age){
Animal.apply(this,[name,age]);
}
<!-- Cat.prototype = new Animal();--> var cat1 = new Cat("xingoo",3);
console.log(cat1.name);
console.log(cat1.age);
cat1.say();

  上面代码中,cat的原型是cat;

  如果开启注释的部分,可以发现,cat类的原型也变成了Animal。

  子类的方法会覆盖父类的方法,即表现出多态性:

            function Pig(name,age){
this.say = function(){
console.log("i am pig");
}
}
Pig.prototype = new Animal();
function Dog(name,age){
this.say = function(){
console.log("i am dog");
}
}
Dog.prototype = new Animal(); function say(animal){
if(animal instanceof Animal){
animal.say();
}
}
var dog = new Dog();
var pig = new Pig();
say(dog);
say(pig);

  使用到的全部代码:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
<!-- 对象初始化器方式 -->
var person={
name:"xingoo",
age:26,
say:function(){
console.log("say something");
},
action:function(){
console.log("do something");
}
}; console.log(person.name);
console.log(person.age);
person.say();
person.action(); <!-- 构造函数方式 -->
function student(name,age){
this.name = name;
this.age = age;
this.say = function(){
console.log("say something");
}
this.action = function(){
console.log("do something");
}
}
var xingoo = new student("xingoo",27);
console.log(xingoo.name);
console.log(xingoo.age);
xingoo.say();
xingoo.action(); <!-- 对象属性 私有属性,对象属性,类属性 -->
function func(){
this.objPro1 = "对象属性";
func.prototype.objPro2 = "对象属性"; var privatePro = "私有属性";
}
func.classPro = "类属性"; console.log(func.classPro); var f = new func();
console.log(f.objPro1);
console.log(f.objPro2); <!-- 私有属性可以通过闭包获取 --> <!-- 私有方法,对象方法,类方法 -->
function demoFunc1(){
var privateFunc = function(){
console.log("this is privateFunc");
}; privateFunc(); this.objFunc1 = function(){
console.log("this is objFunc1");
};
demoFunc1.prototype.objFunc2 = function(){
console.log("this is objFunc2");
};
}
demoFunc1.classFunc = function(){
console.log("this is classFunc");
};
demoFunc1.classFunc(); var f = new demoFunc1();
f.objFunc1();
f.objFunc2(); <!-- 封装性,继承性,多态性 -->
<!-- apply()实现属性和方法的集成,prototype实现原型的继承 --> function Animal(name,age){
this.name = name;
this.age =age;
this.say = function(){
console.log("animal say something");
}
}
function Cat(name,age){
Animal.apply(this,[name,age]);
}
<!-- Cat.prototype = new Animal();--> var cat1 = new Cat("xingoo",3);
console.log(cat1.name);
console.log(cat1.age);
cat1.say(); <!-- 继承 -->
function Pig(name,age){
this.say = function(){
console.log("i am pig");
}
}
Pig.prototype = new Animal();
function Dog(name,age){
this.say = function(){
console.log("i am dog");
}
}
Dog.prototype = new Animal(); function say(animal){
if(animal instanceof Animal){
animal.say();
}
}
var dog = new Dog();
var pig = new Pig();
say(dog);
say(pig);
</script>
</body>
</html>

  运行结果:

JS面向对象高级特性的更多相关文章

  1. Java第五次作业--面向对象高级特性(抽象类与接口)

    Java第五次作业--面向对象高级特性(抽象类与接口) (一)学习总结 1.在上周完成的思维导图基础上,补充本周的学习内容,对Java面向对象编程的知识点做一个全面的总结. 2.汽车租赁公司,出租汽车 ...

  2. Java第四次作业——面向对象高级特性(继承和多态)

    Java第四次作业--面向对象高级特性(继承和多态) (一)学习总结 1.学习使用思维导图对Java面向对象编程的知识点(封装.继承和多态)进行总结. 2.阅读下面程序,分析是否能编译通过?如果不能, ...

  3. Java第四次作业,面向对象高级特性(继承和多态)

    Java第四次作业-面向对象高级特性(继承和多态) (一)学习总结 1.学习使用思维导图对Java面向对象编程的知识点(封装.继承和多态)进行总结. 2.阅读下面程序,分析是否能编译通过?如果不能,说 ...

  4. Java第四次作业—面向对象高级特性(继承和多态)

    Java第四次作业-面向对象高级特性(继承和多态) (一)学习总结 1.学习使用思维导图对Java面向对象编程的知识点(封装.继承和多态)进行总结. 2.阅读下面程序,分析是否能编译通过?如果不能,说 ...

  5. js面向对象高级编程

    面向对象的组成 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. Java第五次作业--面向对象高级特性(抽象类和接口)

    一.学习要点 认真看书并查阅相关资料,掌握以下内容: 掌握抽象类的设计 掌握接口的设计 理解简单工厂设计模式 理解抽象类和接口的区别 掌握包装类的应用 掌握对象的比较方法和比较器的使用 学习使用日期操 ...

  7. Java第四次作业--面向对象高级特性(继承和多态)

    一.学习要点 认真看书并查阅相关资料,掌握以下内容: 掌握类的继承概念和设计 掌握构造方法的继承原则 掌握方法重写 掌握super键字和final关键字 理解多态的概念,掌握通过方法重写和方法重载机制 ...

  8. 五. 面向对象高级特性6. Java 泛型

    我们知道,使用变量之前要定义,定义一个变量时必须要指明它的数据类型,什么样的数据类型赋给什么样的值. 假如我们现在要定义一个类来表示坐标,要求坐标的数据类型可以是整数.小数和字符串,例如: x = 1 ...

  9. 五. 面向对象高级特性1. Java内部类及其实例化

    在 Java 中,允许在一个类(或方法.语句块)的内部定义另一个类,称为内部类(Inner Class),有时也称为嵌套类(Nested Class). 内部类和外层封装它的类之间存在逻辑上的所属关系 ...

随机推荐

  1. MySQL常用技巧

    1.查看MySQL版本信息: 1,登上 mysql>status; 2,登上 mysql>select version(); 3,登上 mysql> select @@version ...

  2. 迅为三星Exynos 4412开发板四核Cortex-A9ARM安卓linux开发板

    开发板光盘资料包含:原理图(PDF格式).底板PCB(Allegro格式).驱动程序源码.芯片和LCD数据手册.开发环境.产品使用手册. 4412开发板简介: iTOP-Exynos4412开发板采用 ...

  3. HDU 4267 A Simple Problem with Integers --树状数组

    题意:给一个序列,操作1:给区间[a,b]中(i-a)%k==0的位置 i 的值都加上val  操作2:查询 i 位置的值 解法:树状数组记录更新值. 由 (i-a)%k == 0 得知 i%k == ...

  4. 看程序写结果(program)

    看程序写结果(program) Time Limit:1000ms Memory Limit:64MB 题目描述 LYK 最近在准备 NOIP2017 的初赛,它最不擅长的就是看程序写结果了,因此它拼 ...

  5. android stuio eclipse映射下的快捷键

    转:关于 android stuio eclipse映射下的快捷键 http://www.cnblogs.com/0616--ataozhijia/p/3870064.html 会持续更新)这边讲的常 ...

  6. GitHub入门之二 参与一个项目编写

    接上文:大多数时候我们也需要把别人的代码进行整合和修改,而不是简单的修改,这时就需要对一个项目进行修改. 注意,本系列文章主要说明在github网站上的操作,更多高级操作请使用git控制台 一.for ...

  7. 堡垒机环境-jumpserver部署

    1:安装数据库 这里是提前安装,也可以不安装,在安装jumpserver主程序的时候,他会询问你是否安装 yum -y install ncurses-devel cmake echo 'export ...

  8. 研:手势与眼动相结合-手势SDK的整合

    Leap提供了SDK.但是整合有很多的问题,写博客记录一下: 写一个类:SampleListener.cpp以及头文件SampleListener.h. 这里主要碰到的问题是找不到以及冲突问题: 这里 ...

  9. jquery 获取select框选中的值示例一则

    $('#MODULE_TYPE').change(function(){ var moduleType=$(this).children('option:selected').val();//这就是s ...

  10. phpmailer 参数使用说明

    $AltBody--属性 出自:PHPMailer::$AltBody 文件:class.phpmailer.php 说明:该属性的设置是在邮件正文不支持HTML的备用显示 AddAddress--方 ...