javascript基础常识问答（五）

this的指向问题

this是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

作为纯粹的函数调用 this指向全局对象，fn() --> window。

作为对象的方法调用 this指向调用对象，obj.fn() --> obj。

作为构造函数被调用 this指向新的对象，var obj = new person() --> obj (new 会改变通话四指向)。

apply调用 this指向apply方法的第一个参数，fn.apply() --> apply(第一个参数)。

箭头函数中的this永远指向该函数定义的位置所在作用域的this。

详细了解看这里

js中浅拷贝和深拷贝的区别

浅拷贝的特点：

引用类型赋值互相影响，但是只影响第一层的数据；
如果第一层是基本数据类型互不影响；
如果第一层是引用数据类型互相影响。

浅拷贝的使用：

obj.assign( {}, 要拷贝的对象或数组 )
…array || …obj 展开运算符
array || obj.slice(0)

深拷贝的特点：

把浅拷贝进行递归操作 --> 动态分配内存空间，把浅拷贝进行层层递归；
如果是基本数据类型，互不影响；
如果是引用数据类型，互不影响。

深拷贝的使用：

JSON.parse(JSON.stringify(a))，专业术语；序列化和反序列化

详细了解看这里

几种常用的继承方式

一、组合继承（最常用）

代码如下：

function Super(name){//只在此处声明基本属性this.name = name;this.sayName = function(){alert(this.name)}
}
// 在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(name){alert("我的名字是"+name)
};
//...
function Sub(name){Super.call(this,name);// 核心
}
Sub.prototype = new Super();// 核心
var sub1 = new Sub("张三");// 实例化
//var sub2 = new Sub("李四");
sub1.sayName()
sub2.fun2("李四")
alert(sub1.sayName === sub2.sayName)// false

结论:

把实例函数都放在原型对象上，以实现函数复用。同时借父类的构造函数来增强子类实例通过Super.call(this);继承父类的基本属性和引用属性并保留能传参的优点；
通过Sub.prototype = new Super();继承父类函数，实现函数复用。

优点：

不存在引用属性共享问题

可传值

函数可复用

缺点：

子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上的，造成内存浪费。

二、ES6中的extends（实际开发比较常用）

代码如下：

class father {//constructor 构造函数主要放公共属性，每个类里一定有，不写自动添加constructor (name) {// 接收参数返回实例对象this.name = name}// 方法和方法之间不能加逗号showName () {alert(this.name)}
}
class son extends father {//super关键字，既可以作函数使用又何以当对象使用。
//当作函数使用时，super代表父类的构造函数，并在子类中执行Parent.apply(this)，
//从而将父类实例对象的属性和方法，添加到子类的this上面.
//子类必须在constructor方法中调用super方法，如果子类没有定义constructor方法，
//constructor方法以及其内部的super方法会被默认添加constructor (name) {super (name)//在子类的constru方法中，只有调用super之后，才能使用this，否则报错}say () {super.showName()// super作为对象时，在子类中指向父类的原型对象}
}
var names = new son("张三")
names.say()

让方法不被实例继承使用static关键字，但是父类的静态方法，会被子类继承

class father {constructor (name) {this.name = name}//使用static关键字实例不会继承该方法static showName (name) {alert(name)}
}
class son extends father {constructor (name) {super (name)}say () {super.showName()}
}
son.showName("李四") //李四
var names = new father()
names.say("张三")// Uncaught TypeError: names.say is not a function

总结：
Class 关键字

class本质还是function

类的所有方法都定义在类的prototype属性上

类创建的实例里面也有_proto_指向类的prototype原型对象

ES6的类其实就是语法糖

super 关键字

super既可以当函数使用，也可以当对象使用

当函数时，super代表父类的构造函数，并在子类中执行Parent.apply(this)，从而将父类实例对象的属性和方法，添加到子类的this上面。

子类必须在constructor方法中调用super方法，如果子类没有定义constructor方法，constructor方法以及其内部的super方法会被默认添加

在子类的constructor方法中，只有调用super之后，才可以使用this关键字，否则会报错。

super作为对象时，在子类中指向父类的原型对象。即super=Parent.prototype。

static关键字
在一个方法前加上关键字static，就表示该方法不会被实例继承，但是父类的静态方法，会被子类继承。

javascript基础常识问答（五）相关推荐

JavaScript基础总结（五）——Math对象
1.JavaScript中的Math对象包括: Math.min()最小值 Math.max()最大值 Math.ceil()向上取最小的整数 Math.floor()向下取值 Math.round( ...
JavaScript基础学习——第五天（原型、垃圾回收、数组简介）
目录 1. 原型 2. 垃圾回收 3. 数组简介知识一:原型深入 JavaScript 之原型和原型链 <!DOCTYPE html> <html><head> ...
Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
编程题: 图5-15所示为一个问卷调查的网页,请制作出来.要求:大标题用h1标签:小题目用h3标签:前两个问题使用有序列表:最后一个问题使用无序列表. 用VS2013新建ASP.NET空网站,添加新项 ...
五、前端开发-JavaScript基础
五.前端开发语言体系-JavaScript基础文章目录五.前端开发语言体系-JavaScript基础 JavaScript基础变量.值和类型运算符和表达式语句数组函数和对象严格模式类 ...
【Javascript基础语法】第五周预习博客
Javascript基础语法前言一.初识JavaScript 1.JS是什么 2.作用 3.浏览器执行js简介 4.Js组成二.JS的引入方式 1.行内式 2.内部引入 3.外部引入三.js语 ...
第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
第三十五篇（JavaScript基础）
JavaScript基础前言 JavaScript(简称 JS)一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分, ...
JavaScript 基础篇(一)
JavaScript基础 JavaScript介绍 JavaScript是什么 **JavaScript是一种运行在客户端的脚本语言** Netscape在最初将其脚本语言命名为LiveScript ...
JavaScript基础系列---闭包及其应用
闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...
JavaScript基础---语言基础（1）
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...

javascript基础常识问答（五）

this的指向问题

js中浅拷贝和深拷贝的区别

几种常用的继承方式

一、组合继承（最常用）

结论:

优点：

缺点：

二、ES6中的extends（实际开发比较常用）

javascript基础常识问答（五）相关推荐

最新文章

热门文章