js细节

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js细节相关的知识,希望对你有一定的参考价值。

什么是鸭子类型

javascript的面向对象

封装

继承

多态

原型

this指向

call

apply

band

js中的闭包

什么是高阶函数

在写面向对象编程思想-设计模式中的js部分的时候发现很多基础知识不了解的话,是很难真正理解和读懂js面向对象的代码。为此,在这里先快速补上。然后继续我们的面向对象编程思想-设计模式。

什么是鸭子类型

 

javascript是一门典型的动态类型语言,也就弱类型语言。

那什么是鸭子类型:【如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭子】

var 鸭子 = {

    走路: function () { },

    咕咕咕: function () { }

}

 

var 鹦鹉 = {

    走路: function () { },

    咕咕咕: function () { }

}

这只鹦鹉同样有“走路”和“咕咕咕”的方法,那在js的世界里就可以把它当成鸭子。

可以这样调用:

var 鸭子们 = [];

鸭子们.push(鸭子);

鸭子们.push(鹦鹉);

 

for (var i = 0; i < 鸭子们.length; i++) {

    鸭子们[i].走路();

}

所以js的世界没有抽象和接口,但可以约定“我们都是鸭子”。

javascript的面向对象

 

javascript不仅是直译式脚本语言、动态类型、弱类型语言、函数为一等公民的语言,它还是基于原型的面向对象语言。面向对象三大特性:封装、继承、多态,下面我们用js分别实现。

封装

var Person = (function () { 

    var sex = "纯爷们";

    return {

        name: "农码一生",

        getInfo: function () {

            console.log("name:" + this.name + ",sex:" + sex);

        }

    };

})();

 

虽然老的js语法没有提供private等关键字,但是我们可以利用闭包来实现私有字段,达到封装的目的。

继承

字面量表示:

var Person = {

name: "农码一生",

getName: function () {

    console.log(this.name);

}

};

var obj = Person;

obj.getName();

 

函数构造器:

var Person = function () {

    this.name = "农码一生";    

}

Person.prototype.getName = function () {

    console.log(this.name);

}

 

var obj = function () { };

obj.prototype = new Person();//obj继承于Person

 

var o = new obj();

o.getName();//直接调用原型中的getName(类似于C#中的调用父类方法)

 

多态

对于多态,其实上面的鸭子类型已经表现的很清楚了。

var 鸭子们 = [];

鸭子们.push(鸭子);

鸭子们.push(鹦鹉);

 

for (var i = 0; i < 鸭子们.length; i++) {

    鸭子们[i].走路();//对于鹦鹉来说,它可能是跳着走。对于鸭子来说,它可能左右摇摆着走。这就是多态的表现。

}

对于鹦鹉来说,它可能是跳着走。对于鸭子来说,它可能左右摇摆着走。这就是多态的表现。

以上是关于js细节的主要内容,如果未能解决你的问题,请参考以下文章

js细节

js 细节

Vue.js 和 MVVM 的小细节

Vue.js特别需要注意的细节(仅对自己参考)

js 对象细节

JS-- 小细节--你悟到了什么?