JS高级---构造函数通过原型添加方法，原型的作用: 共享数据, 节省内存空间

JS高级---构造函数,通过原型添加方法,原型的作用: 共享数据, 节省内存空间构造函数 //构造函数 function Person(sex, age) { this.sex = sex; this.age = age; } 通过原型添加方法 //通过原型添加方法 Person.prototype.sayHi = function () { console.log("打招呼,您好"); }; 通过console.dir来观察和对比per和Person,可以看出: 实例对象中有个属性…

js高级——构造函数，实例对象和原型对象——prototype、proto和constructor构造器

一.前言了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别. 先上代码,最常用的: function Person(name, age) { this.name = name; this.age = age; this.eat= function() { alert('吃西红柿') } } var person1 = new Person('小米', 28…

JS高级---构造函数，实例对象和原型对象，三者关系

构造函数,实例对象和原型对象,三者关系构造函数里面有原型(prototype)属性,即原型对象原型对象里的constryctor构造器指向构造函数通过构造函数,实例化,创建的就是实例对象. 实例对象通过__proto__属性调用原型对象里面的方法构造函数可以实例化对象构造函数中有一个属性叫prototype, 是构造函数的原型对象构造函数的原型对象(prototype)中有一个constructor构造器, 这个构造器指向的就是自己所在的原型对象所在的构造函数实例对象的原型对象(_…

JS高级. 03 混入式继承／原型继承／经典继承、拓展内置对象、原型链、创建函数的方式、arguments、eval、静态成员、实例成员、instanceof/是否在同一个原型链

继承:当前对象没有的属性和方法,别人有,拿来给自己用,就是继承 1 混入式继承 var I={ }; var obj = { name: 'jack', age:18, sayGoodbye : function () { console.log("goodbye") ; } } // 混入式继承, a中将继承obj的所有属性 for (var k in obj ) { a[k] = obj [k] ; } 2.原型继承利用原型中的成员可以被其相关对象共享这一特性,可以实现继承实…

JavaScript中通过原型添加方法,解决数据共享问题,节省内存空间

涉及知识点:(1)原型的引入(2)构造函数.原型对象和实例对象之间的关系(3)__proto__和prototype的理解直接举例:在自定义构造函数创建对象时,因为创建的对象使用的不是同一个方法,所以创建对象越多,就会开辟大量空间造成内存浪费. 验证:在<script>标签中写如下代码,浏览器中打开,按F12可以看到所创建的对象都拥有各自的方法.其中的console.dir(per);可以把这个对象的结构显示出来. 而且将方法放在构造函数外部来指向…

JS事件监听的添加方法

一. 我们一般在的事件添加时是这样做的: elm.onclick = function( ) { //handler } 这样的写法兼容主流的浏览器,但是存在一个问题,当同一个elm绑定多个事件时,只有最后一个事件会被添加如:elm.onclick = handler1; elm.onclick = handler2; elm.onclick = hander3; 只有handler3会被添加执行,所以我们使用另外一种方法添加事件: 二. IE:attachEvent elm.attachEv…

js高级-数组的map foreach 方法

函数式编程 sort map forEach .... jQuery() 数组的sort 方法传入一个匿名函数就是函数式编程 ie9 以上的浏览器支持 map 方法 map方法返回一个新数组 var t = [1,3,9,10,12] for(var i in t){ console.log(t[i]) } //对数组中的每一个元素都*2 var m = t.map(function(item,index,array){ //item 当前选项 index 当前选项索引 arra…

JS高级---总结apply和call方法的使用

apply和call的使用方法 apply的使用语法函数名字.apply(对象,[参数1,参数2,...]); 方法名字.apply(对象,[参数1,参数2,...]); call的使用语法函数名字.call(对象,参数1,参数2,...); 方法名字.call(对象,参数1,参数2,...); 作用: 改变this的指向不同的地方: 参数传递的方式是不一样的只要是想使用别的对象的方法, 并且希望这个方法是当前对象的, 那么就可以使用apply或者是call的方法改变this…

JS高级---原型和原型链

原型和原型链原型链是一种关系, 实例对象和原型对象之间的关系,关系是通过实例对象中浏览器使用的原型(__proto__)来联系的自定义构造函数,通过实例化,创建实例对象实例对象中__proto__是原型,浏览器使用的构造函数中的prototype是原型,程序员使用的 //使用对象---->使用对象中的属性和对象中的方法,使用对象就要先有构造函数 //构造函数 function Person(name,age) { //属性 this.name=name; this.age=age; //…

JS高级---复习

复习面向过程和面向对象都是编程的思想, 方式不一样面向过程: 凡事都是亲力亲为, 所有的代码都要自己写, 每一步都要很清楚, 注重的是过程面向对象: 执行者成为指挥者, 只要找对象, 然后让对象做相关的事情, 注重的是结果面向对象的特性: 封装, 继承, 多态封装:就是代码的封装, 把一些特征和行为封装在对象中面向对象的编程思想: 根据需求, 抽象出相关的对象, 总结对象的特征和行为, 把特征变成属性,行为变成方法, 然后定义(js)构造函数, 实例化对象, 通过对象调用属性…

JS高级---继承

继承面向对象编程思想: 根据需求, 分析对象, 找到对象有什么特征和行为, 通过代码的方式来实现需求, 要想实现这个需求,就要创建对象 ,要想创建对象, 就应该显示有构造函数, 然后通过构造函数来创建对象, 通过对象调用属性和方法来实现相应的功能及需求, 即可需注意首先,JS不是一门面向对象的语言, JS是一门基于对象的语言, 那么为什么学习js还要学习面向对象, 因为面向对象的思想适合于人的想法, 编程起来会更加的方便,及后期的维护.... 面向对象的编程语言中有类(class)的概…

JS高级---原型的引入，原型添加的方法解决数据共享

原型的引入:解决:通过构造函数创建对象带来的问题,即浪费内存(一个对象开一个内存,多个对象开多个内存) 通过原型来添加方法,解决数据共享,节省内存空间 <script> function Person(name, age) { this.name = name; this.age = age; } //通过原型来添加方法,解决数据共享,节省内存空间 Person.prototype.eat = function () { console.log("中午吃白菜"); }; v…

275 原型与原型链：显式原型prototype ，隐式原型proto，隐式原型链，原型链_属性问题，给原型对象添加属性/方法

1.所有函数都有一个特别的属性 prototype : 显式原型属性 [普通构造函数的实例对象没有prototype 属性,构造函数有__proto__属性,原型对象有__proto__属性 ] 2.函数的prototype属性(图) 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象) [即Object实例对象 {}] 原型对象中有一个属性constructor, 它指向函数对象 [相互引用] 3.给原型对象添加属性(一般都是方法) 作用: 函数的所…

JavaScript利用数组原型，添加方法实现遍历多维数组每一个元素

原型就是提供给我们为了让我们扩展更多功能的. 今天学习了用js模拟底层代码,实现数组多维的遍历.思想是在数组原型上添加一个方法. // js中的数组forEach方法,传入回掉函数能够帮助我们遍历数组 var arr =[1,2,3,4,[1,2,[1,4]]]; arr.forEach( function(item , index , arr){ alert(item); //1 2 3 4 1214 } ); //我们发现这个方法只提供给我们遍历一维数组的功能 //我们想自己实现一个能遍…

从零开始学 Web 之 JS 高级（二）原型链，原型的继承

大家好,这里是「从零开始学 Web 系列教程」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.原型链原型链…

JS高级---原型的简单的语法

原型的简单的语法构造函数,通过原型添加方法,以下语法,手动修改构造器的指向实例化对象,并初始化,调用方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> function Student(name, age, sex) { this.name…

[JS]给String对象添加方法,使传入的字符串字符之间以空格分开输出

看到一个这样子的面试题: 给String对象添加一个方法,传入一个string类型的参数,然后将string的每一个字符间加空格返回,例如:addSpace("hello world") //->'h e l l o w o r l d'. 第一眼看这道题目觉得出的很有问题, 既然给String中添加对象,调用方法应该是str.addSpace(),addSpace(str)是一个普通函数的调用方法吧! 请教了下别人,发现自己思维有点误区,直接就考虑到了给String原型添加对象…

JS高级(摘自简书)

JS高级 1. 访问对象属性(方法也是属性)的通用方式:obj['属性名'] 1. 属性名包含特殊字符,如"-".空格,访问:obj['content-type'] 2. 属性名不确定:var name='age'; var value=18; obj[name]=value 2. IIFE:立即执行函数,用于隐藏实现.避免污染全局命名空间.编写JS模块 (function(){ ... })() ---> 即匿名函数自调用 3. this的指向 1. 任何函数本质上都是通过某个…

js高级之函数高级部分

基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码博客下载原型与原型链 prototype : 显式原型属性,它默认指向一个Object空对象(即称为: 原型对象) 原型对象中有一个属性constructor, 它指向函数对象给原型对象添加属性(一般都是方法) 作用: 函数的所有实例对象自动拥有原型中的属性(方法) // 每个函数都有一个prototype属性, 它默认指向一个对象(即称为: 原型对象) console.log(Date.prot…

JS 判断数据类型的三种方法

说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Function,Array,Date,... 很多时候我们都需要通过判断变量的数据类型来进行下一步操作,下面我们介绍常用的三种方法: ① typeof typeof 返回一个表示数据类型的字符串,返回结果包括:number.boolean.string.object.undefined.fu…

js判断数据类型的四种方法

1.typeof typeof是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型.返回的结果用该类型的字符串(全小写字母)形式表示,包括number,string,boolean,undefined,object,function,symbol等. typeof ""; //string typeof 1; //number typeof false; //boolean typeof undefined; //undefined typeof function(){};…

[转]js判断数据类型的四种方法

原文地址:https://www.cnblogs.com/crackedlove/p/10331317.html 1.typeof typeof是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型.返回的结果用该类型的字符串(全小写字母)形式表示,包括number,string,boolean,undefined,object,function,symbol等. typeof ""; //string typeof 1; //number typeof false; //b…

JS高级---体会面向对象和面向过程的编程思想

体会面向对象和面向过程的编程思想 ChangeStyle是自定义的构造函数,再通过原型添加方法的函数. 实例化对象,导入json参数,和创建cs,调用原型添加的方法函数过渡,先熟悉记忆 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div { w…

js高级之对象高级部分

基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写,加入一些个人理解 github源码博客下载对象的创建模式 Object构造函数模式套路: 先创建空Object对象, 再动态添加属性/方法适用场景: 起始时不确定对象内部数据问题: 语句太多 var obj = {}; obj.name = 'Tom' obj.setName = function(name){this.name=name} 对象字面量模式套路: 使用{}创建对象, 同时指定属性/方法适用场景: 起始时对象…

js高级程序设计（六）面向对象

ECMA-262 把对象定义为:“无序属性的集合,其属性可以包含基本值.对象或者函数.”严格来讲,这就相当于说对象是一组没有特定顺序的值.对象的每个属性或方法都有一个名字,而每个名字都映射到一个值.正因为这样(以及其他将要讨论的原因),我们可以把ECMAScript 的对象想象成散列表:无非就是一组名值对,其中值可以是数据或函数.每个对象都是基于一个引用类型创建的,这个引用类型可以是第5 章讨论的原生类型,也可以是开发人员定义的类型. 理解对象创建自定义对象的最简单方式就是创建一个Object…

编写高质量JS代码的68个有效方法（八）

[20141227]编写高质量JS代码的68个有效方法(八) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table,…

关于JavaScript的原型继承与原型链

在讨论原型继承之前,先回顾一下关于创建自定义类型的方式,这里推荐将构造函数和原型模式组合使用,通过构造函数来定义实例自己的属性,再通过原型来定义公共的方法和属性. 这样一来,每个实例都有自己的实例属性副本,又能共享同一个方法,这样的好处就是可以极大的节省内存空间.同时还可以向构造函数传递参数,十分的方便. 这里还要再讲一下两种特色的构造函数模式: 1.寄生构造函数从形式上来看,这种模式和工厂模式并无区别: function Person(name, age, job){var o = new O…