前端笔记之JavaScript面向对象（一）Object&函数上下文&构造函数&原型链

一.对象(Object) 1.1 认识对象对象在JS中狭义对象.广义对象两种. 广义:相当于宏观概念,是狭义内容的升华,高度的提升,范围的拓展.狭义:相当于微观概念,什么是“狭”?因为内容狭隘具体,范围窄所以称为“狭” l 狭义对象就是用{}这种字面量的形式定义的对象,它是一组属性的无序集合 var obj = { name : "小明", age : 12, sex : "男", hobby : ["足球","刺绣",&…

前端笔记之JavaScript面向对象（二）内置构造函数&相关方法|属性|运算符&继承&面向对象

一.复习 1.1复习上下文函数的调用方式上下文 fun() window obj.fun() obj box.onclick = fun box setInterval(fun,1000) setTimeout(fun,1000) window array[8]() array new fun() 秘密创建的新对象要看清楚最终的函数调用者是谁. IIFE也被当做函数直接运行,IIFE的this都是window对象函数的arguments是类数组对象,比如传入的第0项参数是函数,让它运行:…

前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach()方法用来循环遍历数组,方法中的function回调函数接收3个参数参数1是遍历的数组内容(item):参数2是对应的数组索引(index),参数3是是数组本身(array). [].forEach(function(item,index,array){ ... }) var arr = ["白板&…

前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

一.组件化开发 1.1组件化概述页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. new Carousel(); 实例化后,页面中就有一个轮播图的布局结构,而且可以通过参数传递进去. 这个new里面封装了HTML.CSS.JS的业务逻辑.组件开发的规律就是所有按钮.小圆点.图片等等都是这个类(的实例的)属性,自己管理自己. 组件开发的好处就是在用的时候可以高度自定义,在new的时…

前端笔记之JavaScript（四）关于函数、作用域、闭包那点事

一.自定义函数function 函数就是功能.方法的封装.函数能够帮我们封装一段程序代码,这一段代码会具备某一项功能,函数在执行时,封装的这一段代码都会执行一次,实现某种功能.而且,函数可以多次调用. 1.1函数的定义和调用语法: 定义:把需要实现的功能预先做好执行:需要的时候执行这个功能,而且还可以执行多次定义:function myName(){} 执行:myName() [语法解释]: function 定义函数的关键字 myName 函数名称 () 参数集…

3.前端笔记之JavaScript基础

作者:刘耀部分内容参考一下链接参考: http://www.cnblogs.com/wupeiqi/articles/5369773.html http://javascript.ruanyifeng.com/oop/basic.html http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html 一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释…

02.JavaScript 面向对象精要--函数

在JavaScript中,函数其实也是对象.是函数不同于其他对象的特点是:函数存在一个被称为[[Call]]的内部属性.[[Call]]属性是函数独有的,表明该对象可以被执行.ECMAScript 定义了typeof操作符对具有[[Call]]属性的对象返回 "function".理解函数的行为是理解JavaScript的核心. 一.函数声明式和表达式 1.1 函数声明以function开头后面跟着函数的名字 function add(num1,num2){ return num1…

javascript面向对象一：函数

Arguments对象 <script type="text/javascript"> /* Arguments对象: * 在Java中存在函数的重载现象. * 节省了函数的命名空间. * 降低了编码难度. * 性能较好. * 在javascript中也能实现函数的重载? * 不存在函数的重载. * 定义多个同名的函数时,只有最后一个是起作用. * Arguments对象的作用: * 在javascript中,函数定义没有任何参数,调用该函数时可以传递任意参数. * Arg…

前端(四)：JavaScript面向对象之自定义对象

一.对象 1.字面量创建对象 var person = { name: "sun", age: 18, work: function () { console.log(this.name + "is working..."); }, address: { home: "大屯里xxx路xxx小区xx单元xxx室", phone: "123456789", }};person.work();console.log(person.a…

JavaScript面向对象编程（二）构造函数和类

new关键字和构造函数在文章JavaScript面向对象编程(一)原型与继承中讨论啦JavaScript中原型的概念,并且提到了new关键字和构造函数.利用new关键字构造对象的实例代码如下: //define a constructor var Func = function(name,id){ this.name = name; this.id = id; } Func.prototype.className = "Func" var obj = new Func("o…

JavaScript提高篇之面向对象之单利模式工厂模型构造函数原型链模式

1.单例模式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象之单例模式</title> </head> <body> <script type="text/javascript"> //对象数据类型的作用: //把描述同一个事物(同一个对象…

JavaScript中的普通函数与构造函数比较

问题什么是构造函数?构造函数与普通函数区别是什么?用new关键字的时候到底做了什么?构造函数有返回值怎么办?构造函数能当普通函数调用吗? thisthis永远指向当前正在被执行的函数或方法的owner.例如: 1 2 3 4 5 function test(){ console.log(this); } test(); //Window {top: Window, window: Window, location: Location, external: Object, chrome: O…

JavaScript中的普通函数与构造函数

问题什么是构造函数? 构造函数与普通函数区别是什么? 用new关键字的时候到底做了什么? 构造函数有返回值怎么办? 构造函数能当普通函数调用吗? 以下是我的一些理解,理解错误的地方恳请大家帮忙指正,谢谢! this this永远指向当前正在被执行的函数或方法的owner.例如: function test(){ console.log(this); } test();//Window {top: Window, window: Window, location: Location, exter…

javascript面向对象用new创建一个基于原型的javascript对象

//创建一个类其实就是个对象 var Student={ name:"robot", height:1.6, run:function(){ console.log(this.name+'runing'); } } function createStudent(name){ //基于Student原型创建一个新对象 Object.create()可以传入一个对象,创建出基于这个对象原型链的对象 var s = Object.create(Student); // 初始化新对象: s.…

一步步学习javascript基础篇（5）：面向对象设计之对象继承（原型链继承）

上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 = "张三"; } function Obj2() { } Obj2.prototype = new Obj1(); var t2 = new Obj2(); alert(t2.name1); 这里有个明显的缺点就是:(如果父类的属性是引用类型,那么我们在对象实例修改属性的时候会把原型中…

Javascript面向对象编程（三) --- 非构造函数的继承

一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { nation:'中国' }; 还有一个对象,叫做"医生". var Doctor ={ career:'医生' } 请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象? 这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现&q…

Javascript作业—数组去重（要求：原型链上添加函数）

数组去重(要求:原型链上添加函数) <script> //数组去重,要求:在原型链上添加函数 //存储不重复的--仅循环一次 if(!Array.prototype.unique1){ Array.prototype.unique1=function(){ var item , hash={}, len=this.length, result=[]; for(var i = 0 ; i < len ; i++){ item = this[i]; if(!hash[item+Object.…

JavaScript中的普通函数和构造函数

在写JavaScript代码过程中,用到需要写构造函数的地方不多,但还是需要详细了解一下本文尽量描述清楚什么是JavaScript中的构造函数,以及普通函数和构造函数的区别…

javascript基础修炼(1)——一道十面埋伏的原型链面试题

在基础面前,一切技巧都是浮云. 题目是这样的要求写出控制台的输出. function Parent() { this.a = 1; this.b = [1, 2, this.a]; this.c = { demo: 5 }; this.show = function () { console.log(this.a , this.b , this.c.demo ); } } function Child() { this.a = 2; this.change = function () { th…

玩转JavaScript OOP[3]——彻底理解继承和原型链

概述上一篇我们介绍了通过构造函数和原型可以实现JavaScript中的“类”,由于构造函数和函数的原型都是对象,所以JavaScript的“类”本质上也是对象.这一篇我们将介绍JavaScript中的一个重要概念原型链,以及如何经原型链实现JavaScript中的继承. C#的继承首先,我们简单描述一下继承的概念:当一个类和另一个类构成"is a kind of"关系时,这两个类就构成了继承关系.继承关系的双方分别是子类和基类,子类可以重用基类中的属性和方法. C#可以显式地定义c…

javascript作用域、闭包、对象与原型链

原文作者总结得特别好,自己收藏一下.^-^ 1.作用域1.1函数作用域JS的在函数中定义的局部变量只对这个函数内部可见,称之谓函数作用域.它没有块级作用域(因此if.for等语句中的花括号不是独立作用域) var value = 'global'; var f1 = function(){ console.log(v1); //global }; f1(); var f2 = function(){ var v1 ='local'; console.log(v1); //local }; f2(…

Javascript之傻傻理不清的原型链、prototype、proto

新人学习Javascript,其中的原型链一直是云里雾里,不得要领,查了很多相关资料,觉得这遍讲得最为清晰易懂,特转载分享,共同学习. 1. JavaScript内置对象所谓的内置对象指的是:JavaScript本身就自己有的对象可以直接拿来就用.例如Array String 等等.JavaScript一共有12内置对象其中10个函数类型( String,Number,Boolean,Array,Function,Date,RegExp,Error,Object,Event )函数类型…

<JavaScript>constructor、prototype、proto和原型链

在看了网上很多相关的文章,很多都是懵逼看完,并不是说各位前辈们写得不好,而是说实在不容易在一两次阅读中理解透.我在阅读了一些文章后,自己整理总结和绘制了一些相关的图,个人认为会更容易接受和理解,所以分享在此.也因此以下的所有的理解和图解都是出于个人的理解,如果有错误的地方,请各位前辈务必见谅,并辛苦在下方提出和纠错,我实在担心自己不成熟的理论底子会误导了其余的小兄弟. 一开始,先说说为何这个知识点为什么理解起来这么乱个人感觉原因有三: JS内函数即对象. Function对象和Object对象…

JS面向对象组件(一) ---包装对象与原型链

首先我们可以看看平时我们常用的 var str = 'hello'; alert(typeof str); //string var str = new String("hello"); alert(typeof str); //object 上面那个是表示基本类型string类型,下面这个是表示对象类型(String对象类型) 然而纵使是string基本类型,依然可以调用charAt等方法 var str = 'hello'; str.charAt(); str.indexOf('e…

前端笔记之JavaScript（七）深入函数&DOM那点事

一.函数补充 1.1 arguments类数组对象 arguments 是一个对应于传递给函数的参数的类数组对象. 在函数中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们. 在其它编程语言中,比如java:如果一个函数被定义过两次,每次参数个数都不同.相当于定义了两个不同的函数,根据参数个数不同,会选择不同的函数执行.一个函数名定义了两个函数,称为“函数重载”(overloaded). 复习一下函数,定义函数时,参数要罗列在圆括号中,这些参数,叫“形参”: funct…

前端笔记之JavaScript（九）定时器&JSON&同步异步/回调函数&函数节流&call/apply

一.快捷位置和尺寸属性 DOM已经提供给我们计算后的样式,但是还是觉得不方便,因为计算后的样式属性值都是字符串类型. 不能直接参与运算. 所以DOM又提供了一些API:得到的就是number类型的数据,不需要parseInt(),直接可以参与运算. offsetLeft和offsetTop offsetWidth和offsetHeight clinetWidth和clinetHeight 1.1 offsetWidth和offsetHeight 全线兼容,是自己的属性,和别的盒子无关的. 一个盒…

前端笔记之JavaScript（十）深入JavaScript节点&DOM&事件

一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript能做非常多的事情:DOM开发.Ajax开发.Canvas开发.NodeJS开发.前端框架(React.Vue.Angular等等).HTML5开发.这些都需要语言核心的知识. DOM开发说白了就是浏览器中的页面效果开发,在2011年之前,DOM开发占据了前端开发工程师的90%的工作:年之后,前端要负…