1.类和对象的概念:

  1.所有的事物都是一个对象,而类就是具有相同属性和行为方法的事物的集合

  2.在JavaScript中建立对象的目的就是将所有的具有相同属性的行为的代码整合到一起,方便使用者的管理

  3.类是具有相同特征和方法(行为)的事物的抽象,其中可以理解为:对象是类的实例,类是对象的实例

2.如何新建一个对象:

  1. var str = "123" ; // string字符串
  2. var str2 = new String("123"); // object对象

3.新建对象有以下两种方式:

  1. //第一种方式
  2. var obj = new Object();
  3. console.log(typeof obj); // object对象
  4. //第二种方式
  5. var obj1 = {};
  6. console.log(typeof obj1); // object对象

4.如何给对象添加属性和方法

  1. var person1 = {
  2. name:"小明",
  3. age:20,
  4. height:180,
  5. sex:"男",
  6. walk:function(){
  7. console.log("i can walk!") ;
  8. return 2;
  9. }
  10. }
  11. var _name1 = person1.name;
  12. console.log(_name1); // 结果为:小明
  13. console.log(person1.walk()); // 结果为:i can walk 2
  14. 在这里需要注意:在对象中添加的内容:属性和属性值用:(冒号)隔开,属性和属性之间用;(逗号)隔开,在调用对象的属性和方法是用.(点)进行调用,尤其在
    最后的一个属性后面不能加,(逗号),系统会报错

5.如何利用函数的方法给对象添加属性和方法

  1. var person = function(_name,_age,_height,_sex){
  2. var obj = new Object();//创建一个新的对象
  3. obj.name = _name,
  4. obj.age = _age,
  5. obj.height = _height,
  6. obj.sex = _sex,
  7. obj.walk = function(){
  8. console.log("i can walk");
  9. return 2;
  10. }
  11. return obj; // 将建好的对象需做为函数的返回值返回
  12. }
  13. var person = new person("小明",16,160,"男");
  14. console.log(person.walk());// 输出结果:i can walk 2
  15. person.walk();//输出结果:i can walk
  16. console.log(person.height); // 输出结果: 160

6.用够着函数的方法创建对象:注意:构造函数的首字母大写;构造函数的机制:构造函数会自动创建一个空对象,然后与this向关联,并且作为默认返回值返回

  1. function Person(_name,_age,_height){
  2. this.name = _name,
  3. this.age = _age,
  4. this.height = _height,
  5. this.walk = function(){
  6. console.log("i can walk");
  7. return 2;
  8. }
  9. }
  10. var person1 = new Person("小明",18,180);
  11. var person2 = new Person("小红",20,170);
  12. console.log(person1.name);//输出结果:小明
  13. console.log(person2.walk());// i can walk 2
  14. person1.walk();i can walk

注意:构造函数:通过构造函数我们就不用反复定义属性和方法,我们通过构造函数构造了两个对象:person1,person2.同时person1和person2也可以叫做够着函数Person的两个实例。

7.当然系统内置了许多的构造函数 例如:String Array Object Number:简单用代码举两个例子

  1. var str1 = new String("123");
  2. console.log(str1);//输出结果:String{“123”}
  3. console.log(typeof str1);//输出结果为:Object
  4.  
  5. var str2 = new Number("123");
  6. console.log(str2);//输出结果为:Number{123}
  7. console.log(typeof str2);//输出结果为:object
  8. 可见他们都是一种构造函数,创建出来的都是对象

8.原型prototype

  prototype是用来解决内存被过多占用的问题,每一个函数在创建的时候都会默认的分配一个prototype属性,构造函数也不例外,同时prototype是一个指针,他指向一个对象,原型prototype的特点,在内存中只有一份  

  1. function Person(_name,_age,_height){
  2. this.name = _name,
  3. this.age = _age,
  4. this.height = _height,
  5. this.walk = function(){
  6. console.log("我也会走路");
  7. }
  8. }
  9. Person.prototype.info = function(){
  10. console.log("我的姓名是:"+this.name);
  11. }
  12. Person.prototype.walk = function(){
  13. console.log("i can walk");
  14. }
  15. var person = new Person("小明",18,180);
  16. console.log(person.name); //输出结果:小明
  17. person.info();//输出结果:我的姓名是:小明
  18. person.walk();//输出结果:我也会走路
  19. 这个时候我们将构造函数中的walk方法注释掉,之后我们在调用walk方法
  20. person.walk();//输出结果为:i can walk
  21. 由此可知:当对象尝试调用摸个属性和方法的时候,会首先去该对象的构造函数中去找,如果在该函数的构造函数没有的话就会去,改构造函数的原型中去找

9.将原型也作为一个对象

  1. function Person(_name,_age,_height){
  2. this.name = _name,
  3. this.age = _age,
  4. this.height = _height
  5. this.walk = function(){
  6. console.log("我也会走路");
  7. }
  8. }
  9. Person.prototype = {
  10. info:function(){
  11. console.log("我的姓名是:"+this.name);
  12. },
  13. walk:function(){
  14. console.log("i can walk");
  15. }
  16. }
  17. var person = new Person("小红",18,170);
  18. console.log(person.name);//输出结果:小红
  19. person.info();//我的姓名是:小红
  20. person.walk();//我也会走路
  21. 和上面没有什么差别,就是换了一种创建原型的方法

10.面向对象有三大特征:封装、继承、多态、我们现在就说一下继承,在继承中有很多方法,首先说一下call和apply方法(两种方法基本是一样的)call和apply方法的根本在于改变this的指向。但是这种方式只能实现构造函数的继承,但是不能实现原型的继承

  1. //首先创建一个构造函数
  2. function Person(_name,_age,_sex){
  3. this.name = _name;
  4. this.age = _age;
  5. this.sex = _sex;
  6. }
  7. //为构造函数创建原型
  8. Person.prototype = {
  9. info:function(){
  10. console.log("我的名字是:"+this.name);
  11. },
  12. walk:function(){
  13. console.log("i can walk");
  14. }
  15. }
  16. //创建一个构造函数继承Person
  17. function Student(_name,_age,_sex,_height){
  18. Person.call(this,_name,_age,_sex);//call方法进行继承
  19. this.height = _height;
  20. }
  21. var student = new Student("小明",18,"男",180);
  22. var person = new Person("小红",16,"女");
  23. console.log(student.name,student.height);//输出结果:小明 180
  24. console.log(person.name,student.age); // 小红 18
  25. person.info();//输出结果为: 我的名字是:小红
  26. student.info();//输出结果为 student.info is not a function
  27. //由此可见:Student虽然继承了Person的构造函数,但是并没有继承Person的原型

11.基于之前的代码我们更改一下Student的继承方式改成apply看看有什么效果

  1. //首先创建一个构造函数
  2. function Person(_name,_age,_sex){
  3. this.name = _name;
  4. this.age = _age;
  5. this.sex = _sex;
  6. }
  7. //为构造函数创建原型
  8. Person.prototype = {
  9. info:function(){
  10. console.log("我的名字是:"+this.name);
  11. },
  12. walk:function(){
  13. console.log("i can walk");
  14. }
  15. }
  16. //创建一个构造函数继承Person
  17. function Student(_name,_age,_sex,_height){
  18. Person.apply(this,[_name,_age,_sex]);//apply方法进行继承
  19. this.height = _height;
  20. }
  21. var student = new Student("小明",18,"男",180);
  22. var person = new Person("小红",16,"女");
  23. console.log(student.name,student.height);//输出结果:小明 180
  24. console.log(person.name,student.age); // 小红 18
  25. person.info();//输出结果为: 我的名字是:小红
  26. student.info();//输出结果为 student.info is not a function
  27. //由此可见:Student虽然继承了Person的构造函数,但是同样并没有继承Person的原型

12.如何让student继承person的原型:在原型继承的问题上可能有人说我们直接把Person的原型赋值给Student的原型不就行了吗?那我们先来看看这个方法

  1. //首先我们还是粘贴一下前面的代码
  2. //创建一个构造函数
  3. function Person(_name,_age,_sex){
  4. this.name = _name;
  5. this.age = _age;
  6. this.sex = _sex;
  7. }
  8. //为构造函数创建原型
  9. Person.prototype = {
  10. info:function(){
  11. console.log("我的名字是:"+this.name);
  12. },
  13. walk:function(){
  14. console.log("i can walk");
  15. }
  16. }
  17. //创建一个构造函数继承Person
  18. function Student(_name,_age,_sex,_height){
  19. Person.apply(this,[_name,_age,_sex]);//apply方法进行继承
  20. this.height = _height;
  21. }
  22. //将Person的原型赋值给Student的原型
  23. Student.prototype = Person.prototype;
  24. //为了区别一下两个原型,我们在给Student原型在加一个方法
  25. Student.prototype.high = function(){
  26. console.log("我的身高是:" + this.height) ;
  27. }
  28. var person = new Person("小红",16,"女");
  29. var student = new Student("小明",18,"男",180);
  30. //在这里我们只看原型的继承,构造函数的继承就不多说了
  31. person.info();// 输出的结果:我的名字是:小红
  32. student.info();//输出的结果:我的名字是:小明
  33. student.high();//输出的结果:我的身高是:180
  34. //目前可见:Student继承了Person原型,而且他自己独有的原型方法业保持了
  35. //但是这个方法也是有很大的弊端,我们执行一下下面的代码
  36. person.high();//输出的结果:我的身高是:undefined
  37. //这就出问题了,正常应该是person.high not a function才对,因为我们并没有在person原型里定义high方法,但是这里却显示方法存在,只是没有
    //定义参数
  38. //其实原因很简单,在之前我们说过这里的原型就像是一个指针,当我们进行赋值后,更改的是指针所指的地址,于是Student和Person的原型都发生了改变

13.那么我们如何实现原型的继承呢?在原型我们常用的方法就是讲Student的原型作为Person类的一个实例化对象

  1. //首先我们还是粘贴一下前面的代码
  2. //创建一个构造函数
  3. function Person(_name,_age,_sex){
  4. this.name = _name;
  5. this.age = _age;
  6. this.sex = _sex;
  7. }
  8. //为构造函数创建原型
  9. Person.prototype = {
  10. info:function(){
  11. console.log("我的名字是:"+this.name);
  12. },
  13. walk:function(){
  14. console.log("i can walk");
  15. }
  16. }
  17. //创建一个构造函数继承Person
  18. function Student(_name,_age,_sex,_height){
  19. Person.apply(this,[_name,_age,_sex]);//apply方法进行继承
  20. this.height = _height;
  21. }
  22. //将Student的原型作为Person的一个实例化对象
  23. Student.prototype = new Person("天天",16,"女");
  24. //为了区别一下两个原型,我们在给Student原型在加一个方法
  25. //原型创造函数1
  26. Student.prototype.high = function(){
  27. console.log("我的身高是:" + this.height) ;
  28. }
  29. //原型创造函数2
  30. Student.prototype = {
  31. high:function(){
  32. console.log("我的身高是:" + this.height) ;
  33. }
  34. }
  35. var person = new Person("小红",16,"女");
  36. var student = new Student("小明",18,"男",180);
  37. //在这里我们只看原型的继承,构造函数的继承就不多说了
  38. person.info();// 输出的结果:我的名字是:小红
  39. student.info();//输出的结果:我的名字是:小明
  40. student.high();//输出的结果:我的身高是:180
  41. //目前可见:到这里是没有问题的,下面我们依旧测试一下
  42. person.high();//输出的结果:person.high is not a function
  43. //可见这个是对的
  44. //当然这个也是有一些其他的问题的
  45. //在之前我们提到了两种创造原型的方式;第一种方式是没有问题的,现在我们看一下第二种(屏蔽第一种)
  46. //此时除了丝毫不影响的person.info()不受影响外;后面就会提示:student.info is not a function:这个原因是什么呢?
  47. //其实这个原因很简单,就是后面的原型把前面的去远行给覆盖掉了,所以说在进行继承后大家还想给继承者加上其他方法时就按照原型创建函数1来进行就可以了

14:原型链:当对象尝试获取某一个属性或者方法时,若该对象的构造函数没有,回到构造函数的原型函数中去找,如果原型中也没有那么就去原型对象的原型去找,最终到达Object.prototype

  

  

  

  

  

  

  

  

javascript的对象、类和方法的更多相关文章

  1. JavaScript 访问对象属性和方法及区别

    这篇文章主要介绍了浅析JavaScript访问对象属性和方法及区别的相关资料,仅供参考 属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸. ...

  2. JavaScript RegExp对象的exec()方法

    JavaScript RegExp对象的exec()方法用来匹配字符串,它的行为与match()有些不同. 对于RegExpObject.exec(),w3school上面是这样介绍的: exec() ...

  3. javascript 克隆对象/数组的方法 clone()

      1 11 javascript 克隆对象/数组的方法 clone() 1 demo: code: 1 var Obj; 2 let clone = (Obj) => { 3 var buf; ...

  4. 转: JavaScript 获取对象属性和方法

    一.获取对象属性和方法 Object.keys()for in 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返回的数组的所有属性(可枚举或不可枚举 ...

  5. JavaScript 获取对象属性和方法

    ShineJaie 原创整理,转载请注明出处. 一.获取对象属性和方法 Object.keys() 返回对象的可枚举属性和方法的名称数组. Object.getOwnPropertyNames() 返 ...

  6. JavaScript遍历对象4种方法和遍历数组的3种方式 代码

    //遍历对象 4种方法 //Object.keys(obj).forEach() console.log("keys...遍历</br>") var obj1 = { ...

  7. 浅析JavaScript访问对象属性和方法及区别

    属性是一个变量,用来表示一个对象的特征,如颜色.大小.重量等:方法是一个函数,用来表示对象的操作,如奔跑.呼吸.跳跃等. 在JavaScript中通常使用”."运算符来存取对象的属性的值.或 ...

  8. JavaScript原生对象属性和方法详解——Array对象

    http://www.feeldesignstudio.com/2013/09/native-javascript-object-properties-and-methods-array/ lengt ...

  9. javascript Navigator对象属性和方法

    Navigator对象 Navigator 对象包含的属性描述了正在使用的浏览器.可以使用这些属性进行平台专用的配置.虽然这个对象的名称显而易见 的是 Netscape 的 Navigator 的浏览 ...

  10. PYTHON-面向对象 类 绑定方法

    面向对象三大特性(*****) 1继承 1. 什么是继承 继承是一种新建类的方式,新建的类称之为子类/派生类,被继承的类称之为父类/基类/超类 继承与现实生活中的继承一个意思 (例如 小明继承小明他爹 ...

随机推荐

  1. Python10_代码规范和可读性

    养成好的编程习惯和方法对提升代码可读性至关重要. 1.类.模块.包:不要用下划线,命名要简短 2.类:命名最好以大写开头 3.模块.包:用小写单词 4.变量.函数.方法:可以用下划线提高可读性,尽量都 ...

  2. C++引用计数设计与分析(解决垃圾回收问题)

    1.引言 上一篇博文讲到https://www.cnblogs.com/zhaoyixiang/p/12116203.html 我们了解到我们在浅拷贝时对带指针的对象进行拷贝会出现内存泄漏,那C++是 ...

  3. 通过nginx搭建基于python的web环境

    前言: 在搭建开始前,我们先来梳理下web服务工作流程,先看下图: 1.用户(PC)向web服务器发起http请求 2.web服务器判断用户请求文件是否为静态文件,是则直接读取静态文件并返回给用户,不 ...

  4. ES6学习之二

    本文的学习来自技术胖大神的教程:https://jspang.com/ 1扩展运算符和rest运算符 扩展运算符和rest运算符,它们都是…(三个点). 它们有很多相似之处,甚至很多时候不用特意去区分 ...

  5. Asp.net Core Session 存储任意对象

    using Microsoft.AspNetCore.Http; using Newtonsoft.Json; public static class SessionExtensions { publ ...

  6. ELK日志分析系统搭建

    之前一段时间由于版本迭代任务紧,组内代码质量不尽如人意.接二连三的被测试提醒后台错误之后, 我们决定搭建一个后台日志分析系统, 经过几个方案比较后,选择的相对更简单的ELK方案. ELK 是Elast ...

  7. (三)unittest断言方法的介绍

    断言如同在测试用例上,类似于预期结果与实际结果是否一致,如果一致则表示测试通过,Assert断言很好的用于测试结果判断上,更灵活的对预期结果和实际结果进行对比,下面简单的介绍一下unittest的As ...

  8. Swift之代码混淆的调研实施小记

    背景: 最近做APP备案,需要对项目做一系列对优化改进,其中就包括了代码混淆,顾名思义,混淆是为了代码安全,是为了增加逆向破解的难度与复杂度. 目前市面上,免费和付费都有,一些公司对APP加固已经做成 ...

  9. Java并发-几种常见的锁

    这几天在忙着投提前批内推,前面看的好多东西没有总结,正好这两天补上顺带复习一下 synchronized:Java之重型锁

  10. Java String类相关知识梳理(含字符串常量池(String Pool)知识)

    目录 1. String类是什么 1.1 定义 1.2 类结构 1.3 所在的包 2. String类的底层数据结构 3. 关于 intern() 方法(重点) 3.1 作用 3.2 字符串常量池(S ...