对象、原型

问答

1.OOP指什么?有哪些特性

  • OOP:
    Object Oriented Programming,面向对象编程,是一种计算机编程架构。它是用抽象的方式创建基于现实世界模型的一种编程模式。比如在现实世界中的一个杯子就是一个对象,它拥有各种属性:颜色、图案、重量,由什么材质构成等等。同样,在OOP编程中,一个对象也有属性和方法来定义它的特征。
  • 特性:
  • 封装性:将一个类的使用和实现分开,只保留部分接口和方法与外部联系。
  • 继承:子类自动继承其父级类中的属性和方法,并可以添加新的属性和方法或者对部分属性和方法进行重写。
  • 多态:多个子类中虽然都具有同一个方法,但是这些子类实例化的对象调用这些相同的方法后却可以获得不同的结果。 (JavaScript是没有多态的概念)

2.如何通过构造函数的方式创建一个具有属性和方法的对象

要使用构造函数创建一个新的对象,必要要使用new操作符。以下面这种方式调用构造函数实际上会经历一下4种步骤:

  • (1)创建一个新对象;
  • (2)将构造函数的作用域赋给新对象(因此this就指向这个新对象)
  • (3)执行构造函数中的代码(为这个新对象添加属性)
  • (4)返回新对象

代码:

function People(name){
       this.name = name;
       this.sayName = function(){
               console.log(this.name);  
      };
};
var person1 = new Person("LightBuild");

3.prototype是什么?有什么特性

  • prototype:每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由指定类型的所有实例共享的属性和方法
  • 特性: 原型对象的属性和方法由所有实例共享的。
function People(name){
       this.name = "LightBuild";
}
People.prototype.sayName = function(){
        console.log(this.name)
};
var people1 = new People();
people1.sayName();
var people2 = new People();
people2.sayName();
console.log(people1.sayName === people2.sayName);
运行结果

4.画出如下代码的原型图

function People (name){
  this.name = name;
  this.sayName = function(){
    console.log('my name is:' + this.name);
  }
}

People.prototype.walk = function(){
  console.log(this.name + ' is walking');  
}

var p1 = new People('饥人谷');
var p2 = new People('前端');

关于对象和原型的几个关键知识点如下:

  • 在javascript中,所有引用类型(funciton,array,object,null,data,正则)都是对象。
  • 对象都是通过函数来创建的(如new Function,new Object,new Array);
  • 每个函数都有一个prototype,即原型。
  • 每个对象都有一个__proto__,即隐式原型,它指向创建该对象的函数的prototype
  • 到这里就会出现一个比较绕的知识点,有种鸡生蛋蛋生鸡的感觉:Function是一个函数,函数是一种对象,对象就会有__proto__属性,而只要是函数,就一定是被Function创建出来的,所以Funciton的__proto__就指向了自身的prototype
  • Object.prototype.__proto__指向null,这是特例。
    所有的关系如下图:
原型.jpg

5.以下代码中的变量age有什么区别

function People (){
  var age = 1    //局部变量,只有函数作用域内能访问
  this.age = 10; //实例属性,this指向函数所创建的实例,age为实例的属性 
}
People.age = 20; //静态对象属性,函数也是对象,也有自己的属性。

People.prototype.age = 30;//原型对象的属性。

代码

1.创建一个Car对象,拥有属性name、color、status;拥有方法run、stop、getStatus。

function Car (name,color,status){
  this.name = name;
  this.name = color;
  this.status = status;
};

Car.prototype = {
    run:function(){
        this.status = "running";
    },
    stop:function(){
        this.status = "stop";
    },
    getStatus(){
        return this.status;
    }
};

2.创建一个 GoTop 对象,当 new 一个 GotTop 对象则会在页面上创建一个回到顶部的元素,点击页面滚动到顶部。

gotop预览

3.使用构造函数创建对象的方式完成轮播功能

轮播预览

4.使用构造函数创建对象的方式实现 Tab 切换功能

tab预览


本文版权归本人和饥人谷所有,转载请注明来源。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容