前端基础知识练习题---This 练习题

最新推荐文章于 2023-09-26 16:25:47 发布
最新推荐文章于 2023-09-26 16:25:47 发布
阅读量1.1k 收藏 4
点赞数 1
分类专栏： JavaScript 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43477721/article/details/121873961
版权

本次考试为闭卷考试，切勿翻书📖，上网🌐，也不要打开 F12，更不要退出页面，使用本地 IDEA。

请参加考试的人，自觉遵守考试规则。❗️❗️❗️❗️❗️

第一题：

var foo = 123;
function print() {
  this.foo = 234;
  console.log(this);
  console.log(foo);
}
print();

第二题：

"use strict";
var foo = 123;
function print() {
  console.log('print this is ', this);
  console.log(window.foo)
  console.log(this.foo);
}
console.log('global this is ', this);
print();

第三题：

let a = 1;
const b = 2;
var c = 3;
function print() {
  console.log(this.a);
  console.log(this.b);
  console.log(this.c);
}
print();
console.log(this.a);

第四题：

a = 1;
function foo() {
  console.log(this.a);
}
const obj = {
  a: 10,
  bar() {
    foo();
  }
}
obj.bar();

第五题：

var a = 1
function outer() {
  var a = 2
  function inner() {
    console.log(this.a) // 1
  }
  inner()
}
outer()

第六题：

a = 1;
(function () {
  console.log(this);
  console.log(this.a)
}())
function bar() {
  b = 2;
  (function () {
    console.log(this);
    console.log(this.b)
  }())
}
bar();

第七题：

var a = 1;
function foo() {
  console.log(this.a);
}
var obj = { a: 2, foo }
foo();
obj.foo();

第八题：

var obj1 = {
  a: 1,
  obj2: {
    a: 2,
    foo() {
      console.log(this.a)
    }
  }
}
obj1.obj2.foo()

第九题：

a = 1
var obj = {
  a: 2,
  foo() {
    console.log(this.a)
  }
}
var foo = obj.foo;
obj.foo();
foo();

第十题：

var obj = {
  a: 1,
  foo() {
    console.log(this.a)
  }
};
var a = 2;
var foo = obj.foo;
var obj2 = { a: 3, foo: obj.foo }

obj.foo();
foo();
obj2.foo();

第十一题：

function foo() {
  console.log(this.a)
}
function doFoo(fn) {
  console.log(this)
  fn()
}
var obj = { a: 1, foo }
var a = 2
doFoo(obj.foo)

第十二题：

function foo() {
  console.log(this.a)
}
function doFoo(fn) {
  console.log(this)
  fn()
}
var obj = { a: 1, foo }
var a = 2
var obj2 = { a: 3, doFoo }
obj2.doFoo(obj.foo)

第十三题：

var name = 'zcxiaobao';
function introduce() {
  console.log('Hello,My name is ', this.name);
}
const Tom = {
  name: 'TOM',
  introduce: function () {
    setTimeout(function () {
      console.log(this)
      console.log('Hello, My name is ', this.name);
    })
  }
}
const Mary = {
  name: 'Mary',
  introduce
}
const Lisa = {
  name: 'Lisa',
  introduce
}

Tom.introduce();
setTimeout(Mary.introduce, 100);
setTimeout(function () {
  Lisa.introduce();
}, 200);

第十四题：

name = 'javascript';
let obj = {
  name: 'obj',
  A() {
    this.name += 'this';
    console.log(this.name)
  },
  B(f) {
    this.name += 'this';
    f();
  },
  C() {
    setTimeout(function () {
      console.log(this.name);
    }, 1000);
  }
}
let a = obj.A;
a();
obj.B(function () {
  console.log(this.name);
});
obj.C();
console.log(name);

第十五题：

function foo() {
  console.log(this.a)
}
var obj = { a: 1 }
var a = 2

foo()
foo.call(obj)
foo.apply(obj)
foo.bind(obj)

第十六题：

var obj1 = {
  a: 1
}
var obj2 = {
  a: 2,
  bar: function () {
    console.log(this.a)
  },
  foo: function () {
    setTimeout(function () {
      console.log(this)
      console.log(this.a)
    }.call(obj1), 0)
  }
}
var a = 3
obj2.bar()
obj2.foo()

第十七题：

function foo() {
  console.log(this.a)
}
var obj = { a: 1 }
var a = 2

foo()
foo.call(obj)
foo().call(obj)

第十八题：

function foo() {
  console.log(this.a)
  return function () {
    console.log(this.a)
  }
}
var obj = { a: 1 }
var a = 2

foo()
foo.call(obj)
foo().call(obj)

第十九题：

function foo() {
  console.log(this.a)
  return function () {
    console.log(this.a)
  }
}
var obj = { a: 1 }
var a = 2

foo()
foo.bind(obj)
foo().bind(obj)

第二十题：

function foo() {
  console.log(this.a)
  return function () {
    console.log(this.a)
  }
}
var obj = { a: 1 }
var a = 2
foo.call(obj)()

第二十一题：

var obj = {
  a: 'obj',
  foo: function () {
    console.log('foo:', this.a)
    return function () {
      console.log('inner:', this.a)
    }
  }
}
var a = 'window'
var obj2 = { a: 'obj2' }

obj.foo()()
obj.foo.call(obj2)()
obj.foo().call(obj2)

第二十二题：

var obj = {
  a: 1,
  foo: function (b) {
    b = b || this.a
    return function (c) {
      console.log(this.a + b + c)
    }
  }
}
var a = 2
var obj2 = { a: 3 }

obj.foo(a).call(obj2, 1)
obj.foo.call(obj2)(1)

第二十三题：

function User(name, age) {
  this.name = name;
  this.age = age;
}
var name = 'Tom';
var age = 18;

var zc = new User('zc', 24);
console.log(zc.name)

第二十四题：

function User(name, age) {
  this.name = name;
  this.age = age;
  this.introduce = function () {
    console.log(this.name)
  }
  this.howOld = function () {
    return function () {
      console.log(this.age)
    }
  }
}
var name = 'Tom';
var age = 18;
var zc = new User('zc', 24)
zc.introduce()
zc.howOld()()

第二十五题：

name = 'tom'
const obj = {
  name: 'zc',
  intro: () => {
    console.log('My name is ' + this.name)
  }
}
obj.intro()

第二十六题：

name = 'tom'
const obj = {
  name: 'zc',
  intro: function () {
    return () => {
      console.log('My name is ' + this.name)
    }
  },
  intro2: function () {
    return function () {
      console.log('My name is ' + this.name)
    }
  }
}
obj.intro2()()
obj.intro()()

第二十七题：

name = 'window'
const obj1 = {
  name: 'obj1',
  intro: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}
const obj2 = {
  name: 'obj2',
  intro: () => {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
const obj3 = {
  name: 'obj3',
  intro: () => {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  }
}

obj1.intro()()
obj2.intro()()
obj3.intro()()

第二十八题：

function User(name, age) {
  this.name = name;
  this.age = age;
  this.intro = function () {
    console.log('My name is ' + this.name)
  };
  this.howOld = () => {
    console.log('My age is ' + this.age)
  }
}

var name = 'Tom', age = 18;
var zc = new User('zc', 24);
zc.intro();
zc.howOld();

第二十九题：

var name = 'window'
var obj1 = {
  name: 'obj1',
  intro: function () {
    console.log(this.name)
    return () => {
      console.log(this.name)
    }
  },
  intro2: () => {
    console.log(this.name)
    return function () {
      console.log(this.name)
    }
  }
}
var obj2 = {
  name: 'obj2'
}
obj1.intro.call(obj2)()
obj1.intro().call(obj2)
obj1.intro2.call(obj2)()
obj1.intro2().call(obj2)

第三十题：

var name = 'window'
var user1 = {
  name: 'user1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}
var user2 = { name: 'user2' }

user1.foo1()
user1.foo1.call(user2)

user1.foo2()
user1.foo2.call(user2)

user1.foo3()()
user1.foo3.call(user2)()
user1.foo3().call(user2)

user1.foo4()()
user1.foo4.call(user2)()
user1.foo4().call(user2)

第三十一题：

var x = 10;
var foo = {
  x: 20,
  bar: function () {
    var x = 30;
    console.log(this.x)

  }
};
foo.bar();
(foo.bar)();
(foo.bar = foo.bar)();
(foo.bar, foo.bar)();

第三十二题：

var length = 10;
function fn() {
  console.log(this.length);
}

var obj = {
  length: 5,
  method: function (fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1);

第三十三题：

var number = 5;
var obj = {
  number: 3,
  fn: (function () {
    var number;
    this.number *= 2;
    number = number * 2;
    number = 3;
    return function () {
      var num = this.number;
      this.number *= 2;
      console.log(num);
      number *= 3;
      console.log(number);
    }
  })()
}
var myFun = obj.fn;
myFun.call(null);
obj.fn();
console.log(window.number);

你以为拉到底部就有答案了？

在这里插入图片描述

小伙子，你太天真啦

在这里插入图片描述

题目的答案及解析，不再这里哦
什么时候有？
看我心情吧

在这里插入图片描述

特此声明：本次题目来源：
《2w字大章 38道面试题》彻底理清JS中this指向问题
【建议👍】再来40道this面试题酸爽继续(1.2w字用手整理)

前端面试题（超全！）
weixin_57136547的博客
09-09 3927
CSS的盒子模型有哪些：标准盒子模型、IE盒子模型CSS的盒子模型区别：标准盒子模型：margin、border、padding、contentIE盒子模型 ：margin、content（ border + padding + content ）通过CSS如何转换盒子模型：/*标准盒子模型*//*IE盒子模型*/伪元素什么是伪元素：是用于创建并操作元素的特定部分，它可以在DOM中创建一个不存在的元素，并为其添加样式。::before：在元素内容之前插入内容。
前端习题
qq_40102768的博客
08-02 419
一.简答 1.html 中 title 属性和 alt 属性的区别? title:规定有关元素的额外信息 alt:alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文字的 2.请说出几个常用的块级元素和行内元素. 行内元素：与其他行内元素并排...
前端练习题前端练习题前端练习题周考.docx
07-01
前端练习题
前端练习题
文摘资讯
04-28 232
已知字符串"get-element-by-id"，请用JS实现一个方法，将其转化为"getElementById"请用JS实现一个数据去重的方法以下代码输出的结果是fun...
前端基础练习题
qq_28223305的博客
12-13 455
1.     Js里面操作属性的方式有哪些？分别有什么特点？ . 可以操作JS中承认的属性。不能获取行间的自定义属性。 可以添加属性，但是行间看不到。 [] 可以操作变量。不能获取行间自定义属性。 可以添加属性，但是行间看不到。 getAttrbute-setAttrbute-removeAttrbute 可以获取、设置、移除行间的自定义属性。 2 window.onloa
第五模块：WEB开发基础-第4章 javascript基础-练习题
qq_36993243的博客
03-16 343
1.声明一个add函数，要求函数有返回值，并打印结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>add</title> </head> <body> <!--1.声明一个add函数，要求函数有返回值，并打印结果--> <script> funct
前端基础知识与常见面试题(四)
m0_71003185的博客
10-28 436
ref被用来给元素或子组件注册引入信息，引用的信息会被注册在当前vue示例的$refs对象上（console.log(this.$refs.mycom.$el)）二：插件：**vuex-persistedstate**、**vuex-persist**（redux-persist）css预处理，结构清晰，便于重复利用，便于维护，提供了多种功能(嵌套、变量、继承、运算...)// 无法分配到 "sex" ，因为它是只读属性。ts文件后缀都是以**.ts**结尾，并且ts不能直接执行，需要编译为js执行。
1.JavaScript面试真题-210页.zip
最新发布
02-28
JavaScript是Web开发中的核心语言，尤其在前端领域更是不可或缺的一部分。这份"JavaScript面试真题-210页.zip"文件包含了...学习过程中，结合实际案例进行练习和应用场景分析，将更有利于巩固知识并提升问题解决能力。
JavaScript基础练习_day13
02-28
### JavaScript基础练习_day13知识点总结 #### 一、JavaScript数据类型 1. **基本数据类型**：在JavaScript中，基本数据类型包括`number`、`string`、`boolean`、`null`、`undefined`、`bigint`、`symbol`。 - `...
前端基础练习题目
qq_56918166的博客
09-26 104
前端基础练习题目。
学习前端的练习页面
05-22
学习前端的练习页面，自己无聊的时候写的想，新人入门可以看看多练习操作啊。很有必要努力学习，找到好工作。主要的功能我也忘记了，可以下载以后自己看，不要差评
this练习题
weixin_30267697的博客
02-19 341
1 function fn2(){ console.log(this.n) var n='n' this.n=10 console.log(n) } var obj={fn2:fn2, n:1} fn2() obj.fn2() console.log(obj.n, window.n) //undefined 'n' //1 'n' ...
前端考试习题
DoIdo
12-11 1951
随堂测验 1. 简述Web的工作原理 正确答案： 1.用户通过客户端浏览器访问Internet上网站或者其他网络资源时，通过在浏览器输入网站或者网页的（统一资源定位符）网址，或者通过超链接方式链接到另外的网页或者资源； 2.通过域名服务器进行全球域名解析，并根据解析结果访问指定IP的网站或网页； 3.获取网站IP地址后，客户端浏览器向指定IP地址的Web服务器发送一个HTTP（hypertext transfer protocol, 超文本传输协议）请求； 4.Web服务器响应客户端请求，将用户所需的HT
前端练习题整理（1）
小岛的每一段verse的博客
08-23 2244
阅读目录1.2.3.4.5.6.7.![在这里插入图片描述](https://img-blog.csdnimg.cn/63d24f9873bc4d9fa3b93e2019e6130b.png)8.9.10.11.12.13.14. 1. <ul><li>1fsadfsafa<li>2fsafasfafafdaf</ul> 浏览器把关闭的工作给做了，所以在创建列表时，li 标记符的结束标记符可省略。 2. <hr size="10px"/>
网站建设 之 前端练习题
HeroIsUseless的博客
02-26 1165
HTML JS CSS @supports (display: flex) { div { display: flex; }} @supports not (display: flex) { div { float: right; }} 注释：如果浏览器支持display:flex属性的话，那么div的样式就是display:flex，如果浏览器不支持display:flex属性的话，那么div的样式就是display:right @supports (display: flex) and ( box-sh
前端基础部分习题
wang_bing_bo的博客
11-19 4094
1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别? 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 !DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。 标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老
牛客网|前端试题练习一
xiaojiango0的博客
08-16 407
前端牛客网试题练习
WEB前端测试题
Yianxxx的博客
09-26 582
一、填空题（每空1分，共60分） 1、JS中的数据类型有哪些_Number、String、Boolean、undefined、object、Null Symbol bigInt__________；（8种） 2、JS中强制类型转换为number类型的方法有：_parseInt() parseFolat()_number()___。 3、创建一个子节点_document.createElement() ，插入一个子节点_element.appChild()_，在已有元素之前插入节点_element.i.
前端面试必备：HTML-CSS-JS基础知识解析
"这篇内容包含了前端开发的基础面试题目，主要涉及HTML、CSS和JavaScript三个方面的基础知识。" 在前端开发中，HTML（HyperText Markup Language）是构建网页结构的基础，它定义了网页的内容和布局。HTML5是当前...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值