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].走路();//对于鹦鹉来说,它可能是跳着走。对于鸭子来说,它可能左右摇摆着走。这就是多态的表现。

}

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

时间: 2024-12-21 21:28:53

js细节的相关文章

Ext.js细节:在MVC中处理Widget Column,GetCmp和ComponentQuery, Id和ItemId

针对EXT.JS版本的演进,要不断的学习新的最佳实践方法. 比如,在定义组件时,尽管用itemid,而不是id. 在搜索组件时,尽量用ComponentQuery,而不是getCmp. 在MVC中处理Widget Column事件时,应该自定义,而在MVVM中,ViewController 直接写: handler: 'onWidgetClick'. 而在MVC中,需要如下定义: scope: me, //#17 handler: function(btn) { //#18 me.fireEve

项目中用到的ext及js细节

1.js中无replaceAll方法,但可以用replace(regex," "),第一个参数是正则表达式,第二个参数是string,eg:str.replace(/\r\n/g,"*")表示将所有的回车换行都用*来替换. 2.textarea中按下回车,会自动填充\r\n,可由js获取,但是经过服务器端获取就会无\r\n. 3.EXT如何获取DOM元素,用Ext.getDom(),注意Ext.get().Ext.getDom().Ext.getCmp().Ext.

JS细节整理

JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人. 在这篇文章里,我将分享一些JavaScript的技巧.秘诀和最佳实践,除了

CSS与JS细节属性整理

这篇文章小北想分时段写,最近其实积压了挺多,以前没注意的css和js操作. ---------------------我是分哥线.2015-8-5------------------------ css部分: margin-top:20px;父级设置overflow:hidden;或者父级设置padding;或使用padding代替 word-wrap:break-word; IE 6.7.8.9 火狐 均兼容英文换行 text-overflow:ellipsis;单行溢出省略 text-tra

js 细节

1.js中var a=s=1和var a=1,s=1的区别 function fl() { var q = w = 1; } function fl1() { var a = 1, s = 1; } 看出问题所在了吗? var q=w=1 中的s在函数执行后变成全局变量了 2. var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x);// --> undefined console.log(b.x);// --> {n: 2} 上

方便大家学习的Node.js教程(一):理解Node.js

理解Node.js 为了理解Node.js是如何工作的,首先你需要理解一些使得Javascript适用于服务器端开发的关键特性.Javascript是一门简单而又灵活的语言,这种灵活性让它能够经受住时间的考验.函数.闭包等特性使Javascript成为一门适合Web开发的理想语言. 有一种偏见认为Javascript是不可靠的,然而事实并非如此.人们对Javascript的偏见来源于DOM,DOM是浏览器厂商提供的用于Javascript与浏览器交互的API,不同浏览器厂商实现的DOM存在差异.

Vue.js 和 MVVM

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量

[学姿势]实验室搬砖+node学习

这周开始进行收尾工作,我当然没有进行核心技术的开发,主要负责的是对web端进行展示上的修修补补,主要包括添加VLC播放器.rtsp视频流以及一些js细节. 1.VLC 全称为Video Lan Client,此播放器支持各种格式,在平台中主要作为播放实时视频的工具.首先找到VLC的wiki,webplugin一节中有快速上手的文字,学习一些播放控制的方法.对于web端,通过html的OBJECT标签在网页中加入播放器,在target属性中写入实时监控的视频即可.其中还有一些其他参数用来控制播放.

《deetom》项目开发历程&lt;三&gt;

昨天开始写,用户密码修改,把原来的登录 注册调整了下.中间有些细节. 封装获取session中用户信息的方法的时候,我犹豫了很久. class IndexBaseController extends Comm{ protected $userInfo; //session 判断 前置函数 public function init() { $session = $this->instance('Session'); $userInfo = $session->get('index_userInf