JavaScript中几个重要的知识点（1） ---- 面向对象

acrazing 发布于2019-08-20 17:32 / 1793人阅读

摘要：中几个最重要的大知识点面向对象事件异步交互面向对象在中可以把任意的引用和变量都看成是一个对象。我们可以写一个通用方法来模拟面向对象语言的多态

JavaScript中几个最重要的大知识点

面向对象

DOM事件

异步交互ajax

面向对象

在JS中可以把任意的引用和变量都看成是一个对象。面向对象的主要三个表现形式：

封装

继承

多态

1. 封装

1.1 单例模式

var obj={
    name: "sam",
    age: 12,
    method: function(){
        var objName=this.name;
        return objName;
    },
    ale: function(){
        var that=this;
        function sum(num1,num2){
            this.num=that.age;
            return num1+this.num+num2;
        }
        console.log(sum(1,2));
    }
}

单例模式有不污染全局变量和节约window栈内存的优点

var main={
    init:function(){
        this.changeName();
    },
    changeName:function(){
        var that=this;
        var oBody=document.body;
        oBody.onclick=function(){
            that.changeValue();
        }
    },
    changeValue:function(){
        document.getElementById("one").value="sam";
    }
}

main.init();

1.2 工厂模式

能够快速地根据不同需求，传入不同参数，来返回不同的对象，缺点是不能判断对象的类型

function self(name,age,sex){
    var person={};
    person.name=name;
    person.age=age;
    person.sex=sex;
    if(sex=="man"){
        person.job="coder";
    }
    if(sex=="woman"){
        person.job="beatiful";
    }
    return person;
}
var mine=self("sam",22,"man");
console.log(mine.job);

1.3 构造函数模式

构造函数模式能够解决工厂模式不能判断对象类型的缺点，构造函数模式能够自定义类，构造具有相同属性和方法的实例

function Person(){
    this.eat="food";
    this.sleep="night";
    this.say=function(){
        console.log("I am person,I can speak");
    }
}
var person1=new Person();
person1.say();

call()和apply()方法

call()方法：
让调用对象执行，然后第一参数是谁，调用对象的this就改变指向是谁，后边跟参数，依次对应传入

apply()方法：
让调用对象执行，然后第一参数是谁，调用对象的this就改变指向是谁，后边跟参数，以数组的形式传入

2.继承

2.1 原型继承

把被继承者的构造函数赋值给继承者的prototype，注意需要给继承者的prototype手动添加constructor属性

function A(){
    this.name="A";
    this.sayHi=function(){
        console.log("Hi!I am A");
    }
}

function B(){
    this.name="B";
    this.age=22;
    this.sayHi=function(){
        console.log("Hi,I am B");
    }
}
B.prototype.work=function(){
    console.log("I can play");
}

A.prototype=new B();
A.prototype.constructor=A;
var a=new A();
console.log(a);

2.2 call / apply 继承

把被继承者设置的私有属性，克隆一份作为继承者私有的

function A(){
    this.name="A";
    this.age=22;
    this.sayName=function(){
        console.log("I am A");
    }
}

function B(){
    A.call(this);
}

var b=new B();
console.log(b);

2.3 冒充对象继承

继承者继承了被继承者私有和公有的属性和方法

function A(){
    this.x=100;
}
A.prototype.getX=function(){
    console.log(this.x);
}

function B(){
    var temp=new A();
    for(var key in temp){
        this[key]=temp[key];
    }
}

var b=new B();
console.log(b);

3. 多态

javascript中没有严格的多态，因为JS中没有重载，相同名字的函数不能同时存在，后定义的重名函数会覆盖先定义的函数（即使两个形参不相同）。我们可以写一个通用方法来模拟面向对象语言的多态

function simPoly(){
    if(arguments.length==1){
        return function(){
            console.log(1);
        }
    }
    if(arguments.length==2){
        return function(){
            console.log(2);
        }
    }
}

simPoly(1,2)();

GPU云服务器云服务器面向对象知识 javascript 面向对象 javascript面向对象 javascript面向对象编程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83661.html

JavaScript中几个重要的知识点（2） ---- DOM事件

摘要：使用来移除事件，参数必须与要移除的事件处理函数地址指针相同。在低版本浏览器中，绑定级事件的方法为中的级事件的事件处理程序都是在冒泡阶段执行的。 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax 事件事件就是文档和浏览器的瞬间交互行为 1.事件类型点击: click 滚轮: scroll 滑动: move 进入: enter 加载: load ...

dantezhao 2019-08-20 17:33 评论0 收藏0
JavaScript中几个重要的知识点（3） ---- Ajax

摘要：与响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。 JavaScript中几个最重要的大知识点面向对象 DOM事件异步交互ajax AJAX AJAX是异步的javascript和xml（Asynchronous Javascript And XML）的缩写，用于网页局部刷新，提升用户浏览体验通常前端程序员关于AJAX的掌握仅仅停留在会用AJAX发送...

starsfun 2019-08-20 17:36 评论0 收藏0
Javascript中几个看起来简单，却不一定会做的题

摘要：作为前端开发必须掌握的一门语言，因为语言的灵活性，有些知识点看起来简单，在真正遇到的时候，却不一定会直接做出来，今天我们就一起来看看几道题目吧题目这道题考察的知识点是运算符的优先级。 Javascript作为前端开发必须掌握的一门语言，因为语言的灵活性，有些知识点看起来简单，在真正遇到的时候，却不一定会直接做出来，今天我们就一起来看看几道题目吧题目1 var val = smtg; ...

itvincent 2019-08-22 15:43 评论0 收藏0
css中几个重要概念

摘要：包含块是一个相对的概念，比如子元素的初始化布局总是在父元素的左上角，这就是一个相对的概念。每个元素都会生成一个包含块，但这个包含块是虚无的，你看不到也摸不着，只是一个概念。这个属性在新的版本中已经移除了，可以不用关注该属性了。替换元素与非替换元素替换元素：是指浏览器根据元素的标签和属性来决定元素的具体内容。例如浏览器会根据标签的src属性的值来读取图片信息并显示，浏览器会根据i...

darkbug 2019-08-29 15:37 评论0 收藏0
css中几个重要概念

摘要：包含块是一个相对的概念，比如子元素的初始化布局总是在父元素的左上角，这就是一个相对的概念。每个元素都会生成一个包含块，但这个包含块是虚无的，你看不到也摸不着，只是一个概念。这个属性在新的版本中已经移除了，可以不用关注该属性了。替换元素与非替换元素替换元素：是指浏览器根据元素的标签和属性来决定元素的具体内容。例如浏览器会根据标签的src属性的值来读取图片信息并显示，浏览器会根据i...

piapia 2019-08-26 12:00 评论0 收藏0