JavaScript面向对象简介

方法一:构造函数法

function Cat(){
    this.name = "";
}
Cat.prototype.showName = function(){
    console.log(this.name);
}  

var cat = new Cat();
cat.name = "Tom";
cat.showName();// Tom

它用构造函数模拟"类",在其内部用this关键字指代实例对象。
类的属性和方法,还可以定义在构造函数的prototype对象之上。
生成实例的时候,使用new关键字。

方法二:Object.create()法

var Cat = {
    name:"",
    showName:function(){
        console.log(this.name);
    }
};  

var cat = Object.create(Cat);
cat.name = "Tom";
cat.showName();// Tom

用这个方法,"类"就是一个对象,不是函数。
然后,直接用Object.create()生成实例,不需要用到new。

方法三:极简主义法
1 类的定义

var Cat = {
    createNew:function(){
        var cat = {};
        cat.name = "";
        cat.showName = function(){
            console.log(this.name);
        }
        return cat;
    }
};  

var cat = Cat.createNew();
cat.name = "Tom";
cat.showName();// Tom

2 继承

var Animal = {
    createNew:function(){
        var animal = {};
        animal.name = "";
        animal.sleep = function(){
            console.log("ZZzz...");
        }
        return animal;
    }
};  

var Cat = {
    createNew:function(){
        var cat = Animal.createNew();
        cat.name = "Cat";
        cat.showName = function(){
            console.log(this.name);
        }
        return cat;
    }
};  

var cat = Cat.createNew();
cat.name = "Tom";
cat.showName();// Tom
cat.sleep();// ZZzz...

让一个类继承另一个类,实现起来很方便。只要在前者的createNew()方法中,调用后者的createNew()方法即可。

3 私有成员

var Cat = {
    createNew:function(){
        var cat = {};
        var name = "Tom";// 私有
        cat.showName = function(){
            console.log(name);
        }
        return cat;
    }
};  

var cat = Cat.createNew();
cat.showName();// Tom

在createNew()方法中,只要不是定义在cat对象上的方法和属性,都是私有的。

4 类属性

var Cat = {
    className:"Cat",
    createNew:function(){
        var cat = {};
        cat.name = "";// 私有
        cat.showName = function(){
            console.log(cat.name);
        }
        cat.showClass =  function(){
            console.log(Cat.className);
        }
        return cat;
    }
};  

var cat1 = Cat.createNew();
cat1.name = "Tom";
cat1.showName();
cat1.showClass();  

var cat2 = Cat.createNew();
cat2.name = "Jim";
cat2.showName();
cat2.showClass();

有时候,我们需要所有实例对象,能够读写同一项内部数据。
这个时候,只要把这个内部数据,封装在类对象的里面即createNew()方法的外面即可。

原文地址:https://www.cnblogs.com/guangyun/p/8990941.html

时间: 2024-11-02 00:08:14

JavaScript面向对象简介的相关文章

JavaScript 面向对象(三) —— 高级篇

JavaScript 面向对象(一) —— 基础篇 JavaScript 面向对象(二) —— 案例篇 一.json方式的面向对象 首先要知道,js中出现的东西都能够放到json中.关于json数据格式这里推荐一篇博客:JSON 数据格式 先看下json创建的简单对象:相比基础篇中的构造函数.原型等的创建方式,json方式简单方便:但是缺点很明显,如果想创建多个对象,那么会产生大量重复代码,不可取. JSON方式适用于只创建一个对象的情况,代码简介又优雅. 1 <!DOCTYPE html>

JavaScript面向对象及相关知识

最近在学习JavaScript面向对象,写下自己的理解及相关资料,以备查阅. 一.面向对象中涉及的相关几个概念 1.作用域 所谓作用域,就是说属性和函数的可访问范围.在JavaScript中,作用域分为两种.全局作用域和局部作用域. 所有没有var 声明 或 定义于最外层函数和最外层函数外面即为全局作用域.也就是定义可以随意调用. 自定义函数内部用var声明的为局部作用域. var num = 1; //全局作用域 window.onload = function() { //最外层为全局作用域

javascript面向对象之this指针

下午用面向对象的方法写一个幻灯片插件的时候不小心写出了这样的代码: Slider.prototype.auto=function() { setInterval(this.toRun,4000);//注意 } Slider.prototype.toRun=function() { if(this.iNow==this.aA.length - 1) ...... } 在浏览器打开的时候发现幻灯片不能如预期般自动切换,控制台给出了这样的错误提示: this.aA isundefined?然而我已经在

javascript面向对象2

原文:javascript面向对象2 首先我们先创建一个对象 var user = Object(); user.name = "张三"; user.age = 20; user.sex = "男"; 上面呢创建了一个对象,当然创建对象的方法有很多种,但是用这样的方法创建对象比较简单直观,也是JavaScript种创建对象最基本的方法. 同时呢也出现了另外一个弊端,当我们想要创建多个对象的时候,我们就要写很多重复的代码,这样一来就增加了代码量,减少了工作的效率, 为

JavaScript面向对象之类的继承

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript时,可以选择面向过程的方式编程,显得高效:但在实际工作中,遇到的项目需求和框架较大的情况下,选择面向对象的方式编程显得尤其重要,Javascript原生语法中没有提供表述面向对象语言特性的关键字和语法(如extends.implement).为了实现这些面向对象的特性,需要额外编写一些代码,如下.

[连载]JavaScript讲义(03)--- JavaScript面向对象编程

[连载]JavaScript讲义(03)--- JavaScript面向对象编程,布布扣,bubuko.com

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

Javascript 面向对象编程(一):封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd